| LEFT | RIGHT | 
|---|
| (no file at all) |  | 
| 1 title=Utilities | 1 title=Utilities | 
| 2 description=HTML & SCSS component utilities | 2 description=HTML & SCSS component utilities | 
| 3 | 3 | 
| 4 <h1>Utilities</h1> | 4 <h1>Utilities</h1> | 
| 5 <p>HTML & SCSS component utilities</p> | 5 <p>HTML & SCSS component utilities</p> | 
| 6 | 6 | 
| 7 <ol> | 7 <ol> | 
| 8   <li><a href="#backgrounds">Backgrounds</a></li> | 8   <li><a href="#backgrounds">Backgrounds</a></li> | 
| 9   <li><a href="#text-alignment">Text Alignment</a></li> | 9   <li><a href="#text-alignment">Text Alignment</a></li> | 
| 10   <li><a href="#lead-text">Lead text</a></li> | 10   <li><a href="#lead-text">Lead text</a></li> | 
|  | 11   <li><a href="#horizontal-lists">Horizontal lists</a></li> | 
| 11 </ol> | 12 </ol> | 
| 12 | 13 | 
| 13 <h2 id="backgrounds">Backgrounds</h2> | 14 <h2 id="backgrounds">Backgrounds</h2> | 
| 14 | 15 | 
| 15 <p class="bg-primary">Primary background</p> | 16 <p class="bg-primary">Primary background</p> | 
| 16 | 17 | 
| 17 <p class="bg-secondary">Secondary background</p> | 18 <p class="bg-secondary">Secondary background</p> | 
| 18 | 19 | 
| 19 <p class="bg-accent">Accent background</p> | 20 <p class="bg-accent">Accent background</p> | 
| 20 | 21 | 
| (...skipping 10 matching lines...) Expand all  Loading... | 
| 31 | 32 | 
| 32 <p class="text-right">Text aligned right</p> | 33 <p class="text-right">Text aligned right</p> | 
| 33 | 34 | 
| 34 <p class="text-end">Text aligned to the end of the container</p> | 35 <p class="text-end">Text aligned to the end of the container</p> | 
| 35 | 36 | 
| 36 <h2 id="lead-text">Lead text</h2> | 37 <h2 id="lead-text">Lead text</h2> | 
| 37 | 38 | 
| 38 <p class="lead"> "Lead text" is introductory text that is not part of a heading.
    </p> | 39 <p class="lead"> "Lead text" is introductory text that is not part of a heading.
    </p> | 
| 39 | 40 | 
| 40 <p>It is typically visually emphasized, not semantically emphasized, like <code>
    strong</code> or <code>em</code>.</p> | 41 <p>It is typically visually emphasized, not semantically emphasized, like <code>
    strong</code> or <code>em</code>.</p> | 
|  | 42 | 
|  | 43 | 
|  | 44 <h2 id="horizontal-lists">Horizontal lists</h2> | 
|  | 45 | 
|  | 46 <ul class="horizontal-list"> | 
|  | 47   <li>List item 1</li> | 
|  | 48   <li>List item 2</li> | 
|  | 49   <li>List item 3</li> | 
|  | 50   <li>List item 4</li> | 
|  | 51 </ul> | 
|  | 52 | 
|  | 53 <h3>Comma-separated</h3> | 
|  | 54 | 
|  | 55 <ul class="horizontal-list comma-separated"> | 
|  | 56   <li>List item 1</li> | 
|  | 57   <li>List item 2</li> | 
|  | 58   <li>List item 3</li> | 
|  | 59   <li>List item 4</li> | 
|  | 60 </ul> | 
| LEFT | RIGHT | 
|---|