Lists

CSS file

The following are the list styles available in the design system.

Unstyled list

Resets the base styling applied to any list

<ul class="sba-c-unstyled-list">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Timelines

Timelines visually connect items in an ordered list.

<div class="sba-c-timeline">
  <div class="sba-c-timeline__group">
    <h4 class="sba-c-timeline__header">August 2017</h4>
    <ol class="sba-c-timeline__list">
      <li class="sba-c-timeline__list__item">
        <span class="sba-c-timeline__timestamp">08/24 at 4:12pm</span>
        <p>Jane Doe change the status to In Progress</p>
      </li>
      <li class="sba-c-timeline__list__item">
        <span class="timeline__timestamp">08/23 at 12:18pm</span>
        <p>Karen Smith changed the review status to Assigned</p>
      </li>
      <li class="sba-c-timeline__list__item">
        <span class="sba-c-timeline__timestamp">08/19 at 9:52am</span>
        <p>Karen Smith changed the review status to Assigned</p>
      </li>
    </ol>
  </div>
  <div class="sba-c-timeline__group">
    <h4 class="sba-c-timeline__header">June 2017</h4>
    <ol class="sba-c-timeline__list">
      <li class="sba-c-timeline__list__item">
        <span class="sba-c-timeline__timestamp">07/24 at 4:12pm</span>
        <p>Jane Doe change the status to In Progress</p>
      </li>
    </ol>
  </div>
</div>

Guidance

• Always use ol instead of ul for the list since the pattern establishes a specific order.
• Timeline sets can be grouped in a sba-c-timeline__group to break up sets visually.

When to consider something else

• When there is no ordered, linear relationship from one list item to the next

Lists of form fields

These lists are only useful when placed within the sba-l-content-wrapper--form content wrapper.

<h3 class="sba-u-color--muted">Text inputs</h3>
<div class="sba-l-content-wrapper--form">
  <ul class="sba-c-fields-list">
    <li>
      <div class="sba-c-field-wrap">
        <label class="sba-c-label" for="s1_1">First Name</label>
        <input class="sba-c-input" id="s1_1" type="text" />
      </div>
    </li>
    <li>
      <div class="sba-c-field-wrap">
        <label class="sba-c-label" for="s1_2">Last name</label>
        <input class="sba-c-input" id="s1_2" type="text" />
      </div>
    </li>
    <li>
      <div class="sba-c-field-wrap">
        <label class="sba-c-label" for="s1_3">Nickname</label>
        <input class="sba-c-input" id="s1_3" type="text" />
      </div>
    </li>
  </ul>
</div>
<h3 class="sba-u-color--muted">Radios and checkboxes</h3>
<div class="sba-l-content-wrapper--form">
  <div class="sba-c-field-wrap">
    <ul class="sba-c-fields-list sba-c-fields-list--condensed">
      <li>
        <input class="sba-c-radio" id="s2_1" type="checkbox" name="s2" value="v" >
        <label class="sba-c-label" for="s2_1">Option 1</label>
      </li>
      <li>
        <input class="sba-c-radio" id="s2_2" type="checkbox" name="s2" value="v" >
        <label class="sba-c-label" for="s2_2">Option 2</label>
      </li>
      <li>
        <input class="sba-c-radio" id="s2_3" type="checkbox" name="s2" value="v" >
        <label class="sba-c-label" for="s2_3">Option 3</label>
      </li>
    </ul>
  </div>
</div>