Lists

Code Examples

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

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("ordered-list-1", "ordered-list-2", "unordered-list-1", etc).

Lists

  • Bare List Item
  • Bare List Item
  • Bare List Item
  1. Ordered List Item
  2. Ordered List Item
  3. Ordered List Item
<ul class="sprk-b-List" data-id="unordered-list-1">
  <li data-id="list-item-1">Bare List Item</li>
  <li data-id="list-item-2">Bare List Item</li>
  <li data-id="list-item-3">Bare List Item</li>
</ul>

<ol class="sprk-b-List" data-id="ordered-list-1">
  <li data-id="list-item-4">Ordered List Item</li>
  <li data-id="list-item-5">Ordered List Item</li>
  <li data-id="list-item-6">Ordered List Item</li>
</ol>
          
<sprk-unordered-list idString="unordered-list-1">
  <sprk-list-item idString="list-item-1">
    Bare List Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-2">
    Bare List Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-3">
    Bare List Item
  </sprk-list-item>
  </sprk-ordered-list>

  <sprk-ordered-list idString="ordered-list-1">
    <sprk-list-item idString="list-item-4">
      Ordered List Item
    </sprk-list-item>
    <sprk-list-item idString="list-item-5">
      Ordered List Item
    </sprk-list-item>
    <sprk-list-item idString="list-item-6">
      Ordered List 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.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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" data-id="unordered-list-2">
  <li data-id="list-item-7">Indented Item</li>
  <li data-id="list-item-8">Indented Item</li>
  <li data-id="list-item-9">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" idString="unordered-list-2">
  <sprk-list-item idString="list-item-7">
    Indented Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-8">
    Indented Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-9">
    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" data-id="unordered-list-3">
  <li data-id="list-item-10">Bare List Item</li>
  <li data-id="list-item-11">Bare List Item</li>
  <li data-id="list-item-12">Bare List Item</li>
</ul>
          
<sprk-unordered-list listType="bare" idString="unordered-list-2">
  <sprk-list-item idString="list-item-10">
    Bare List Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-11">
    Bare List Item
  </sprk-list-item>
  <sprk-list-item idString="list-item-12">
    Bare List Item
  </sprk-list-item>
</sprk-unordered-list>