OLD | NEW |
1 title=Utilities | 1 title=Utilities |
2 | 2 |
3 <h1>Utilities</h1> | 3 <h1>Utilities</h1> |
4 <p>HTML & SCSS component utilities</p> | 4 <p>HTML & SCSS component utilities</p> |
5 | 5 |
6 <ol> | 6 <ol> |
7 <li><a href="#backgrounds">Backgrounds</a></li> | 7 <li><a href="#backgrounds">Backgrounds</a></li> |
8 <li><a href="#text-alignment">Text Alignment</a></li> | 8 <li><a href="#text-alignment">Text Alignment</a></li> |
| 9 <li><a href="#lead-text">Lead text</a></li> |
9 </ol> | 10 </ol> |
10 | 11 |
11 <h2 id="backgrounds">Backgrounds</h2> | 12 <h2 id="backgrounds">Backgrounds</h2> |
12 | 13 |
13 <p class="bg-primary">Primary background</p> | 14 <p class="bg-primary">Primary background</p> |
14 | 15 |
15 <p class="bg-secondary">Secondary background</p> | 16 <p class="bg-secondary">Secondary background</p> |
16 | 17 |
17 <p class="bg-accent">Accent background</p> | 18 <p class="bg-accent">Accent background</p> |
18 | 19 |
19 <p class="bg-error">Error background</p> | 20 <p class="bg-error">Error background</p> |
20 | 21 |
21 | 22 |
22 <h2 id="text-alignment">Text Alignment</h2> | 23 <h2 id="text-alignment">Text Alignment</h2> |
23 | 24 |
24 <p class="text-center">Text aligned center</p> | 25 <p class="text-center">Text aligned center</p> |
25 | 26 |
26 <p class="text-left">Text aligned left</p> | 27 <p class="text-left">Text aligned left</p> |
27 | 28 |
28 <p class="text-start">Text aligned to the start of the container</p> | 29 <p class="text-start">Text aligned to the start of the container</p> |
29 | 30 |
30 <p class="text-right">Text aligned right</p> | 31 <p class="text-right">Text aligned right</p> |
31 | 32 |
32 <p class="text-end">Text aligned to the end of the container</p> | 33 <p class="text-end">Text aligned to the end of the container</p> |
| 34 |
| 35 <h2 id="lead-text">Lead text</h2> |
| 36 |
| 37 <p class="lead"> "Lead text" is introductory text that is not part of a heading.
</p> |
| 38 |
| 39 <p>It is typically visually emphasized, not semantically emphasized, like <code>
strong</code> or <code>em</code>.</p> |
OLD | NEW |