| 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 |