Lists

Use a List for a list of items. There are three List styles available: default, bare, and indented.

Lists

  • Unordered Item
  • Unordered Item
  • Unordered Item
  1. Ordered Item
  2. Ordered Item
  3. Ordered Item
<ul class="sprk-b-List">
  <li>Unordered Item</li>
  <li>Unordered Item</li>
  <li>Unordered Item</li>
</ul>

<ol class="sprk-b-List">
  <li>Ordered Item</li>
  <li>Ordered Item</li>
  <li>Ordered Item</li>
</ol>

Indented

Use indented lists whenever lists are within a block of text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum.

  • Indented Item
  • Indented Item
  • Indented Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum.
</p>
<ul class="sprk-b-List sprk-b-List--indented">
  <li>Indented Item</li>
  <li>Indented Item</li>
  <li>Indented Item</li>
</ul>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum.
</p>

Bare

  • Bare List Item
  • Bare List Item
  • Bare List Item
<ul class="sprk-b-List sprk-b-List--bare">
  <li>Bare List Item</li>
  <li>Bare List Item</li>
  <li>Bare List Item</li>
</ul>