Hollow Knight Wiki:Sandbox/Components

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

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.

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

Using    will make any paragraphs (    ) inside it to not have any margin:

Grid layout
You can learn more about grids here.

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,  will have a red background, while the cells inside it will have an green background.

12 columns cell =
 * Example 1: 1 cell that spans all 12 columns (100%).

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


 * -| 6 columns =
 * Example 2: 2 cells that spans 6 out of 12 columns (50%).

 6 columns. 6 columns. 6 columns. 6 columns.


 * -| 4 columns =
 * Example 3: 3 cells that spans 4 out of 12 columns (33.3%).

<pre style="min-height: 16em;"> <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">4 columns.


 * -| 3 columns =
 * Example 4: 4 cells that spans 3 out of 12 columns (25%).

<pre style="min-height: 16em;"> <div class="grid__col--span-3">3 columns. <div class="grid__col--span-3">3 columns. <div class="grid__col--span-3">3 columns. <div class="grid__col--span-3">3 columns. <div class="grid__col--span-3" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">3 columns. <div class="grid__col--span-3" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">3 columns. <div class="grid__col--span-3" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">3 columns. <div class="grid__col--span-3" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">3 columns.


 * -| 2 columns =
 * Example 5: 6 cells that spans 2 out of 12 columns (16.666...%).

<pre style="min-height: 16em;"> <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns. <div class="grid__col--span-2" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">2 columns.


 * -| 1 column =
 * Example 6: 12 cells that spans 1 out of 12 columns (8.333...%).

<pre style="min-height: 16em;"> <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. <div class="grid__col--span-1" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000;">1 column. 2 columns: 6 and 10 spans =
 * Example 7: 2 cells. The first one takes 6 out of the 12 available columns, while the second one takes 10.

<pre style="min-height: 7em;"> <div class="grid__col--span-6">6 columns. <div class="grid__col--span-10">10 columns. <div class="grid__col--span-6" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 6em;">6 columns. <div class="grid__col--span-10" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 6em;">10 columns.


 * -| 3 columns: 5, 9, and 4 spans =
 * 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.

<pre style="min-height: 7em;"> <div class="grid__col--span-5">5 columns. <div class="grid__col--span-9">9 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-5" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 6em;">5 columns. <div class="grid__col--span-9" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 6em;">9 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 6em;">4 columns.

Grid and cell alignment
<p class="typography--body1" style="margin-block-end: 1em;">You can also align the grid layout horizontally, and its cells vertically. To do so, you have to use the class  in the top grid layout element (or   in the cells) and replace   with the desired position. ,, and   aligns the cell vertically, while  ,  , and   horizontally aligns the grid layout.

Vertical alignment = <div class="grid__col--span-4 grid__col--align-middle">4 columns. Middle. <div class="grid__col--span-4 grid__col--align-top">4 columns. Top. <div class="grid__col--span-4 grid__col--align-bottom">4 columns. Bottom. <div class="grid__col--span-4 grid__col--align-middle" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. Middle. <div class="grid__col--span-4 grid__col--align-top" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. Top. <div class="grid__col--span-4 grid__col--align-bottom" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. Bottom.

<p class="typography--body1" style="margin-block-end: 1em;">This requires a max-width on the top-level grid element.
 * -| Horizontal alignment =

<div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid grid--align-right" style="background-color: #f00; max-width: 500px; text-align: center; hyphens: auto;"> <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid grid--align-left" style="background-color: #f00; max-width: 500px; text-align: center; hyphens: auto;"> <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid__col--span-4">4 columns. <div class="grid grid--align-center" style="background-color: #f00; max-width: 500px; text-align: center; hyphens: auto;"> <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns. <div class="grid__col--span-4" style="display: flex; justify-content: center; align-items: center; background-color: #0f0; color: #000; min-height: 4em;">4 columns.

Accordions
<p class="typography--body1" style="margin-block-end: 1em;">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. <p class="typography--body1" style="margin-block-end: 1em;">To use accordions, you just have to wrap it with an  with the classes

Examples
Text =


 * -| Link list =