Hollow Knight Wiki

Hornet Sitting.gif

Hey there! Welcome to the Hollow Knight Wiki! If you haven't already, please check the Editing Guidelines and the Rules of Conduct. If you want to contribute and don't know where to start, check our To-Do pages! Also don't forget to set up your profile and customize it if you want.
You can also join the Wiki Discord server here. Be warned though, "Here there be spoilers"! ;)

READ MORE

Hollow Knight Wiki
Advertisement
Welcome to Hollow Knight Wiki's Sandbox!
This is the Hollow Knight Wiki sandbox. You can experiment with making edits on this page. To edit this page, click the "Edit" tab (or the pencil button in mobile view) at the top of the page, or click here. After making your changes, you can preview them by clicking the "Show preview" button below the edit box, and save them by clicking the "Save page" button in the same place.


Note that changes made here are not kept, since this page is only meant for testing. If you have an account and are logged in, you can create subpages of this page (e.g. Hollow Knight Wiki:Sandbox/Temporary testing page) for longer-term projects, though these may still be deleted after a period of inactivity. Additionally, if you're registered, you can create a personal sandbox in your userspace where you can experiment without worrying that your changes will be wiped.


Typography system

These are all of the classes that modify the aspect of the text.

Code Result
<p class="typography--headline1">Headline 1</p>

Headline 1

<p class="typography--headline2">Headline 2</p>

Headline 2

<p class="typography--headline3">Headline 3</p>

Headline 3

<p class="typography--headline4">Headline 4</p>

Headline 4

<p class="typography--headline5">Headline 5</p>

Headline 5

<p class="typography--headline6">Headline 6</p>

Headline 6

<p class="typography--subtitle1">Subtitle 1</p>

Subtitle 1

<p class="typography--subtitle2">Subtitle 2</p>

Subtitle 2

<p class="typography--body1">Body 1</p>

Body 1

<p class="typography--body2">Body 2</p>

Body 2

<p class="typography--caption">Caption</p>

Caption

<p class="typography--button">Button</p>

Button

<p class="typography--overline">Overline</p>

Overline

<p class="typography--footnote">Footnote</p>

Footnote

Hierarchy

You can also determine which texts are more important than the others by using different opacities. Those classes use neutral-colored texts that adapts to both Dark and Light themes.

Normal text
Type Opacity Code Result
On background 100%
<p class="typography--on-background">Text on background.</p>

Text on background.

Primary 87%
<p class="typography--primary">Primary text.</p>

Primary text.

Secondary 60%
<p class="typography--secondary">Secondary text.</p>

Secondary text.

Disabled 38%
<p class="typography--disabled">Disabled text.</p>

Disabled text.

Inverted text
Type Opacity Code Result
On background 100%
<p class="typography--on-background--inverse">Text on background.</p>

Inverse text on background.

Primary 87%
<p class="typography--primary--inverse">Primary text.</p>

Inverse primary text.

Secondary 60%
<p class="typography--secondary--inverse">Secondary text.</p>

Inverse pecondary text.

Disabled 38%
<p class="typography--disabled--inverse">Disabled text.</p>

Inverse disabled text.

Colors

You can also personalize your text by using high-contrast colors that adapts to both Light and Dark themes.

Color Code Result
Red
<p class="h-c__red">Red text.</p>

Red text.

Pink
<p class="h-c__pink">Pink text.</p>

Pink text.

Purple
<p class="h-c__purple">Purple text.</p>

Purple text.

Deep purple
<p class="h-c__deep-purple">Deep purple text.</p>

Deep purple text.

Indigo
<p class="h-c__indigo">Indigo text.</p>

Indigo text.

Blue
<p class="h-c__blue">Blue text.</p>

Blue text.

Light blue
<p class="h-c__light-blue">Light blue text.</p>

Light blue text.

Cyan
<p class="h-c__cyan">Cyan text.</p>

Cyan text.

Teal
<p class="h-c__teal">Teal text.</p>

Teal text.

Green
<p class="h-c__green">Green text.</p>

Green text.

Light Green
<p class="h-c__light-green">Light green text.</p>

Light green text.

Lime
<p class="h-c__lime">Lime text.</p>

Lime text.

Yellow
<p class="h-c__yellow">Yellow text.</p>

Yellow text.

Amber
<p class="h-c__amber">Amber text.</p>

Amber text.

Orange
<p class="h-c__orange">Orange text.</p>

Orange text.

Deep orange
<p class="h-c__deep-orange">Deep orange text.</p>

Deep orange text.

Brown
<p class="h-c__brown">Brown text.</p>

Brown text.

Grey
<p class="h-c__grey">Grey text.</p>

Grey text.

Blue grey
<p class="h-c__blue-grey">Blue grey text.</p>

Blue grey text.

Using <div class="typography"></div> will make any paragraphs (<p></p>) inside it to not have any margin:

Code Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, massa vel faucibus laoreet, orci leo finibus purus, eleifend pulvinar eros felis eget tellus.

Sed sed blandit neque. Proin a mollis risus. In porta risus massa, in ullamcorper nulla suscipit nec. Nunc sodales urna libero, in aliquam ante commodo ac. Vivamus id pretium nibh, eget fringilla nunc. Vestibulum et lobortis sapien.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, massa vel faucibus laoreet, orci leo finibus purus, eleifend pulvinar eros felis eget tellus.

Sed sed blandit neque. Proin a mollis risus. In porta risus massa, in ullamcorper nulla suscipit nec. Nunc sodales urna libero, in aliquam ante commodo ac. Vivamus id pretium nibh, eget fringilla nunc. Vestibulum et lobortis sapien.

<div class="typography">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, massa vel faucibus laoreet, orci leo finibus purus, eleifend pulvinar eros felis eget tellus.

Sed sed blandit neque. Proin a mollis risus. In porta risus massa, in ullamcorper nulla suscipit nec. Nunc sodales urna libero, in aliquam ante commodo ac. Vivamus id pretium nibh, eget fringilla nunc. Vestibulum et lobortis sapien.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus, massa vel faucibus laoreet, orci leo finibus purus, eleifend pulvinar eros felis eget tellus.

Sed sed blandit neque. Proin a mollis risus. In porta risus massa, in ullamcorper nulla suscipit nec. Nunc sodales urna libero, in aliquam ante commodo ac. Vivamus id pretium nibh, eget fringilla nunc. Vestibulum et lobortis sapien.

Grid layout

You can learn more about grids here.

HTML Elements

HTML Element Description Values
<div class="glue-grid"></div>
Mandatory, for the layout grid element. -
<div class="glue-grid--align-[POSITION]"></div>
Optional, specifies the alignment of the layout grid element. left, center, right
<div class="glue-grid__col--span-[NUMBER_OF_COLUMNS]"></div>
Optional, specifies the number of columns the cell spans. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
<div class="glue-grid__col--align-[POSITION]"></div>
Optional, specifies the alignment of cell. top, middle, bottom

Usage

Grid layouts come with 12 columns where you can place its contents by fillings its columns. If the sum of two or more children elements (now called cells) gives a total higher than 12 columns, the last cell will move below. You can't use an single cell that spans 13 or more columns.

In the following examples, glue-grid will have a red background, while the cells inside it will have an green background.

Example 1: 1 cell that spans all 12 columns (100%).
<div class="glue-grid">
<div class="glue-grid__col--span-12">Since this elements spans all 12 columns, any new sibling element will be below this box/element.</div>
</div>


Since this elements spans all 12 columns, any new sibling element will be below this box/element.

Example 2: 2 cells that spans 6 out of 12 columns (50%).
<div class="glue-grid">
<div class="glue-grid__col--span-6">6 columns.</div>
<div class="glue-grid__col--span-6">6 columns.</div>
</div>


6 columns.
6 columns.

Example 3: 3 cells that spans 4 out of 12 columns (33.3%).
<div class="glue-grid">
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
</div>


4 columns.
4 columns.
4 columns.

Example 4: 4 cells that spans 3 out of 12 columns (25%).
<div class="glue-grid">
<div class="glue-grid__col--span-3">3 columns.</div>
<div class="glue-grid__col--span-3">3 columns.</div>
<div class="glue-grid__col--span-3">3 columns.</div>
<div class="glue-grid__col--span-3">3 columns.</div>
</div>


3 columns.
3 columns.
3 columns.
3 columns.

Example 5: 6 cells that spans 2 out of 12 columns (16.666...%).
<div class="glue-grid">
<div class="glue-grid__col--span-2">2 columns.</div>
<div class="glue-grid__col--span-2">2 columns.</div>
<div class="glue-grid__col--span-2">2 columns.</div>
<div class="glue-grid__col--span-2">2 columns.</div>
<div class="glue-grid__col--span-2">2 columns.</div>
<div class="glue-grid__col--span-2">2 columns.</div>
</div>


2 columns.
2 columns.
2 columns.
2 columns.
2 columns.
2 columns.

Example 6: 12 cells that spans 1 out of 12 columns (8.333...%).
<div class="glue-grid">
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
<div class="glue-grid__col--span-1">1 column.</div>
</div>


1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.
1 column.


Example 7: 2 cells. The first one takes 6 out of the 12 available columns, while the second one takes 10.
<div class="glue-grid">
<div class="glue-grid__col--span-6">6 columns.</div>
<div class="glue-grid__col--span-10">10 columns.</div>
</div>


6 columns.
10 columns.

Example 8: 2 cells. The first one takes 5 out of the 12 available columns, the second one takes 9, and the third one takes 4.
<div class="glue-grid">
<div class="glue-grid__col--span-5">5 columns.</div>
<div class="glue-grid__col--span-9">9 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
</div>


5 columns.
9 columns.
4 columns.


Grid and cell alignment

You can also align the grid layout horizontally, and its cells vertically. To do so, you have to use the class glue-grid--align-[POSITION] in the top grid layout element (or glue-grid__col--align-[POSITION] in the cells) and replace [POSITION] with the desired position. top, middle, and bottom aligns the cell vertically, while left, right, and center horizontally aligns the grid layout.


<div class="glue-grid">
<div class="glue-grid__col--span-4 glue-grid__col--align-middle">4 columns. Middle.</div>
<div class="glue-grid__col--span-4 glue-grid__col--align-top">4 columns. Top.</div>
<div class="glue-grid__col--span-4 glue-grid__col--align-bottom">4 columns. Bottom.</div>
</div>


4 columns. Middle.
4 columns. Top.
4 columns. Bottom.

This requires a max-width on the top-level grid element.

<div class="glue-grid glue-grid--align-right" style="max-width: 500px;">
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
</div>


4 columns.
4 columns.
4 columns.


<div class="glue-grid glue-grid--align-left" style="max-width: 500px;">
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
</div>


4 columns.
4 columns.
4 columns.


<div class="glue-grid glue-grid--align-center" style="max-width: 500px;">
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
<div class="glue-grid__col--span-4">4 columns.</div>
</div>


4 columns.
4 columns.
4 columns.

Accordions

Accordions are, basically, re-skinned collapsible elements whose design comes from Google's websites. There are two different types of accordions. One is for text, and the other is for a list of links.

To use accordions, you just have to wrap it with an div with the classes mat-accordion [TYPE]-accordion.

HTML/Wikitext Elements

HTML Element Description Values
<div class="mat-accordion [TYPE]-accordion"></div>
Mandatory, for collapsible element to look like an accordion. text, list
If it's an text accordion
HTML/Wikitext Elements Description Values
<div class="mat-accordion text-accordion">
{{User:Polymeric/Accordion|[TITLE]|[TEXT]}}
</div>
Mandatory, for the accordion element to appear. Any string.
If it's an link accordion
HTML/Wikitext Elements Description Values
<div class="mat-accordion list-accordion">
{{User:Polymeric/Accordion|[TITLE]|
* [https://example.com Link 1]
* [[Example|Link 2]]
* [https://example.com Link 3]
* ...}}
</div>
Mandatory, for the accordion element to appear. Note: The list elements MUST be links, or else, the design will break. You can use either internal ([[Example]]) or external links ([https://example.com example]). Any string. / List with links.

Examples


<div class="mat-accordion text-accordion">
{{User:Polymeric/Accordion|Title 1|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sem mi, scelerisque in metus a, faucibus suscipit arcu. Phasellus pellentesque eget quam ac venenatis. Sed ac magna ut est placerat auctor non in mi. Integer nec magna id turpis sollicitudin pulvinar. Integer vulputate sapien in leo tincidunt, non scelerisque eros elementum. Integer in tincidunt lectus. Quisque luctus sem sed volutpat convallis. Mauris auctor purus et ligula feugiat, at consectetur dui iaculis. Sed et rhoncus purus, non blandit est. Nulla nibh lectus, sodales sed commodo in, vehicula nec eros. Sed sed tincidunt justo. Quisque et elementum ex, a facilisis eros. Aliquam interdum ac tellus non auctor. In quis ex dignissim, aliquet urna a, commodo orci. Nulla facilisi.}}
{{User:Polymeric/Accordion|Title 2|Donec pharetra mattis urna ut viverra. Morbi gravida hendrerit erat, vel aliquet orci pellentesque quis. Mauris gravida malesuada pellentesque. Etiam viverra, ligula in posuere suscipit, augue nulla consectetur quam, at egestas nunc lectus eu est. Donec rutrum ligula sit amet urna blandit mattis. Curabitur tempor velit ut urna efficitur bibendum. Nulla faucibus sed dui in blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed congue sollicitudin lorem a venenatis. Nulla facilisi. Sed id nunc ut metus fringilla eleifend imperdiet a nunc. Quisque eu nisi eget tellus placerat efficitur.}}
{{User:Polymeric/Accordion|Title 3|Sed augue purus, rhoncus eget arcu sed, congue pellentesque libero. Nam ultricies tortor nec pellentesque scelerisque. Aliquam hendrerit aliquam justo at congue. Etiam efficitur pretium felis quis vehicula. Ut gravida tellus id justo gravida tincidunt. Phasellus ante risus, porta non ex eu, faucibus semper arcu. Aliquam eu pharetra lorem, et ullamcorper orci.}}
{{User:Polymeric/Accordion|Title 4|Mauris iaculis feugiat risus. Sed et urna tellus. Nunc pharetra, purus non iaculis elementum, mauris quam aliquet nisl, eget volutpat massa velit eget nulla. Cras et dapibus ante. Pellentesque ac tempus erat. In congue felis quis justo feugiat, id pharetra sem finibus. Cras mattis est nec urna ullamcorper, sit amet bibendum enim efficitur. Morbi porttitor maximus egestas. Morbi sollicitudin aliquet dictum. Nunc lectus quam, condimentum venenatis mattis nec, scelerisque non erat.}}
{{User:Polymeric/Accordion|Title 5|Donec et dolor nec velit ultrices tempor eget quis metus. Aenean id suscipit nulla. Nam laoreet tellus non laoreet sollicitudin. In condimentum leo ut nisi gravida vulputate. Praesent leo dolor, posuere at suscipit id, semper vitae risus. Pellentesque ultrices consequat risus at rhoncus. Maecenas ut tincidunt urna. Proin efficitur cursus justo eget aliquet. Integer eget leo eget nulla mollis semper.}}
</div>

User:Polymeric/Accordion User:Polymeric/Accordion User:Polymeric/Accordion User:Polymeric/Accordion User:Polymeric/Accordion


<div class="mat-accordion list-accordion">
{{User:Polymeric/Accordion|Title 1|
* [https://example.com Link 1]
* [https://example.com Link 2]
* [https://example.com Link 3]
}}
{{User:Polymeric/Accordion|Title 2|
* [https://example.com Link 1]
* [[Special:Random|Link 2]]
* [https://example.com Link 3]
* [[Special:Random|Link 4]]
* [https://example.com Link 5]
}}
{{User:Polymeric/Accordion|Title 3|
* [[Special:Random|Link 1]]
* [https://example.com Link 2]
* [[Special:Random|Link 3]]
* [https://example.com Link 4]
* [[Special:Random|Link 5]]
* [https://example.com Link 6]
* [[Special:Random|Link 7]]
}}
</div>

User:Polymeric/Accordion User:Polymeric/Accordion User:Polymeric/Accordion

Advertisement