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