Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Lists

A list groups related content together and arranges it vertically for easier readability. List classes are designed for <ul> or <ol> elements and their <li> children.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Euismod nisi porta lorem mollis.
  3. Neque volutpat ac tincidunt vitae semper.
Ordered List
Pairing list items with numbers helps the user recognize that the order or total number of items is important.
<ol class="c-ordered-list">
    <li class="c-ordered-list__item">List Item</li>
    <li class="c-ordered-list__item">List Item</li>
    <li class="c-ordered-list__item">List Item</li>
</ol>
Copy
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Euismod nisi porta lorem mollis.
  • Neque volutpat ac tincidunt vitae semper.
Unordered List
Pairing list items with bullets helps the user recognize that all content presented is of equal status or value.
<ul class="c-unordered-list">
    <li class="c-unordered-list__item">List Item</li>
    <li class="c-unordered-list__item">List Item</li>
    <li class="c-unordered-list__item">List Item</li>
</ul>
Copy
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Euismod nisi porta lorem mollis.
  • Neque volutpat ac tincidunt vitae semper.
Icon List
Pairing list items with icons makes the unordered content the primary focus in a layout.
<ul class="c-icon-list" arialabelledby="accountdetailslabel">
    <li class="c-icon-list__item">
      <span class="c-icon-list__icon">
        <i class="icon icon--stopwatch"></i>
      </span>
        <span class="c-icon-list__content">List Item</span>
    </li>
    <li class="c-icon-list__item">
      <span class="c-icon-list__icon">
        <i class="icon icon--stopwatch"></i>
      </span>
        <span class="c-icon-list__content">List Item</span>
    </li>
    <li class="c-icon-list__item">
        <span class="c-icon-list__icon">
          <i class="icon icon--stopwatch"></i>
        </span>
        <span class="c-icon-list__content">List Item</span>
    </li>
</ul>
Copy

Design Environment

Here is a list of what you'll need:
  1. List Item
  2. List Item
  3. List Item

Now that you know what you'll need...

Use a l-margin-horizontal--large to create 24px of space between lists and any components before or after. Ordered and unordered lists have a l-margin-left--medium for a 16px left-side indentation.

<title class="c-title">Here is a list of what you'll need:</title>
  <ol class="c-ordered-list l-margin-vertical--large">
      <li class="c-ordered-list__item l-margin-left--medium">List Item</li>
      <li class="c-ordered-list__item l-margin-left--medium">List Item</li>
      <li class="c-ordered-list__item l-margin-left--medium">List Item</li>
  </ol> 
<p class="c-text-content">Now that you know what you'll need...</p>
Copy
  • List Item
  • List Item
  • List Item

Use at least a l-margin-horizontal--medium to create 16px of space between lists items. In icon lists, increase the margin between items to l-margin-horizontal--large for a 24px.

<ul class="c-unordered-list l-margin-vertical--large">
      <li class="c-unordered-list__item l-margin-left--medium l-margin-bottom--medium">List Item</li>
      <li class="c-unordered-list__item l-margin-left--medium l-margin-bottom--medium">List Item</li>
      <li class="c-unordered-list__item l-margin-left--medium l-margin-bottom--medium">List Item</li>
  </ul>
Copy