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 |
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. |
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. |
You can learn more about grids here.
| HTML Element | Description | Values |
|---|---|---|
<div class="glue-grid"></div> |
Mandatory, for the layout grid element. | - |
<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, left, right |
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>
: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>
: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>
: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>
: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>
: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>
: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>
: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>
You can also align cells both vertically and horizontally. To do so, you have to use the class glue-grid__col--align-[POSITION] and replace [POSITION] with the desired position. top, middle, and bottom aligns the cell vertically, while left and right aligns it horizontally.
<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>
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>
<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>
<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>