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="grid"></div> |
Mandatory, for the layout grid element. | - |
<div class="grid--align-[POSITION]"></div> |
Optional, specifies the alignment of the layout grid element. | left, center, right |
<div class="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="grid__col--align-[POSITION]"></div> |
Optional, specifies the alignment of cell. | top, middle, bottom |
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, 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="grid"> <div class="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="grid"> <div class="grid__col--span-6">6 columns.</div> <div class="grid__col--span-6">6 columns.</div> </div>
:Example 3: 3 cells that spans 4 out of 12 columns (33.3%).
<div class="grid"> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> </div>
:Example 4: 4 cells that spans 3 out of 12 columns (25%).
<div class="grid"> <div class="grid__col--span-3">3 columns.</div> <div class="grid__col--span-3">3 columns.</div> <div class="grid__col--span-3">3 columns.</div> <div class="grid__col--span-3">3 columns.</div> </div>
:Example 5: 6 cells that spans 2 out of 12 columns (16.666...%).
<div class="grid"> <div class="grid__col--span-2">2 columns.</div> <div class="grid__col--span-2">2 columns.</div> <div class="grid__col--span-2">2 columns.</div> <div class="grid__col--span-2">2 columns.</div> <div class="grid__col--span-2">2 columns.</div> <div class="grid__col--span-2">2 columns.</div> </div>
:Example 6: 12 cells that spans 1 out of 12 columns (8.333...%).
<div class="grid"> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="grid__col--span-1">1 column.</div> <div class="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="grid"> <div class="grid__col--span-6">6 columns.</div> <div class="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="grid"> <div class="grid__col--span-5">5 columns.</div> <div class="grid__col--span-9">9 columns.</div> <div class="grid__col--span-4">4 columns.</div> </div>
You can also align the grid layout horizontally, and its cells vertically. To do so, you have to use the class grid--align-[POSITION] in the top grid layout element (or 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="grid"> <div class="grid__col--span-4 grid__col--align-middle">4 columns. Middle.</div> <div class="grid__col--span-4 grid__col--align-top">4 columns. Top.</div> <div class="grid__col--span-4 grid__col--align-bottom">4 columns. Bottom.</div> </div>
This requires a max-width on the top-level grid element.
<div class="grid grid--align-right" style="max-width: 500px;"> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> </div>
<div class="grid grid--align-left" style="max-width: 500px;"> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> </div>
<div class="grid grid--align-center" style="max-width: 500px;"> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> <div class="grid__col--span-4">4 columns.</div> </div>
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.
Go to the documentation page on Dev Wiki to learn how to use them.
{{Accordion
| accordion-1-title = Title 1
| accordion-1-contents = 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.
| accordion-2-title = Title 2
| accordion-2-contents = 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.
| accordion-3-title = Title 3
| accordion-3-contents = 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.
| accordion-4-title = Title 4
| accordion-4-contents = 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.
| accordion-5-title = Title 5
| accordion-5-contents = 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.
}}
{{Accordion
| type = links
| accordion-1-title = Title 1
| accordion-1-link-1 = [https://example.com Link 1]
| accordion-1-link-2 = [https://example.com Link 2]
| accordion-1-link-3 = [https://example.com Link 3]
| accordion-2-title = Title 2
| accordion-2-link-1 = [https://example.com Link 1]
| accordion-2-link-2 = [[Special:Random|Link 2]]
| accordion-2-link-3 = [https://example.com Link 3]
| accordion-2-link-4 = [[Special:Random|Link 4]]
| accordion-2-link-5 = [https://example.com Link 5]
| accordion-3-title = Title 3
| accordion-3-link-1 = [[Special:Random|Link 1]]
| accordion-3-link-2 = [https://example.com Link 2]
| accordion-3-link-3 = [[Special:Random|Link 3]]
| accordion-3-link-4 = [https://example.com Link 4]
| accordion-3-link-5 = [[Special:Random|Link 5]]
| accordion-3-link-6 = [https://example.com Link 6]
| accordion-3-link-7 = [[Special:Random|Link 7]]
}}