| Index: pages/utilities.html |
| =================================================================== |
| --- a/pages/utilities.html |
| +++ b/pages/utilities.html |
| @@ -3,16 +3,17 @@ |
| <h1>Utilities</h1> |
| <p>HTML & SCSS component utilities</p> |
| <ol> |
| <li><a href="#backgrounds">Backgrounds</a></li> |
| <li><a href="#text-alignment">Text Alignment</a></li> |
| <li><a href="#lead-text">Lead text</a></li> |
| + <li><a href="#horizontal-lists">Horizontal lists</a></li> |
| </ol> |
| <h2 id="backgrounds">Backgrounds</h2> |
| <p class="bg-primary">Primary background</p> |
| <p class="bg-secondary">Secondary background</p> |
| @@ -33,8 +34,27 @@ |
| <p class="text-end">Text aligned to the end of the container</p> |
| <h2 id="lead-text">Lead text</h2> |
| <p class="lead"> "Lead text" is introductory text that is not part of a heading.</p> |
| <p>It is typically visually emphasized, not semantically emphasized, like <code>strong</code> or <code>em</code>.</p> |
| + |
| + |
| +<h2 id="horizontal-lists">Horizontal lists</h2> |
| + |
| +<ul class="horizontal-list"> |
| + <li>List item 1</li> |
| + <li>List item 2</li> |
| + <li>List item 3</li> |
| + <li>List item 4</li> |
| +</ul> |
| + |
| +<h3>Comma-separated</h3> |
| + |
| +<ul class="horizontal-list comma-separated"> |
| + <li>List item 1</li> |
| + <li>List item 2</li> |
| + <li>List item 3</li> |
| + <li>List item 4</li> |
| +</ul> |