Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Lists

Code Examples

Spark-Core

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>
          
<sprk-unordered-list>
  <sprk-list-item>
    Unordered Item
  </sprk-list-item>
  <sprk-list-item>
    Unordered Item
  </sprk-list-item>
  <sprk-list-item>
    Unordered Item
  </sprk-list-item>
</sprk-unordered-list>

<sprk-ordered-list>
  <sprk-list-item>
    Ordered Item
  </sprk-list-item>
  <sprk-list-item>
    Ordered Item
  </sprk-list-item>
  <sprk-list-item>
    Ordered Item
  </sprk-list-item>
</sprk-ordered-list>

Information

See below for available customization options:

Input Type Description
listType string Can be 'bare' or 'indented'. Will cause the appropriate variant type to render.
additionalClasses string Use additionalClasses to supply additional CSS classes for the element.

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>
          
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida urna quis nulla ultrices, sed efficitur risus elementum.
</p>

<sprk-unordered-list listType="indented">
  <sprk-list-item>
    Indented Item
  </sprk-list-item>
  <sprk-list-item>
    Indented Item
  </sprk-list-item>
  <sprk-list-item>
    Indented Item
  </sprk-list-item>
</sprk-unordered-list>

<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>
          
<sprk-unordered-list listType="bare">
  <sprk-list-item>
    Bare List Item
  </sprk-list-item>
  <sprk-list-item>
    Bare List Item
  </sprk-list-item>
  <sprk-list-item>
    Bare List Item
  </sprk-list-item>
</sprk-unordered-list>
sparkdesignsystem@quickenloans.com