Lists

Lists are continuous, vertical indexes of text or images.

The List component is composed of items containing primary and supplemental actions, which are represented by icons and text. Lists are optimized for reading comprehension. A list consists of a single continuous column of subdivisions called rows that contain items of content.

Basic List

A .u-list is a wrapper for multiple .u-list__item elements. This component is used as a building block for other components, or may contain elements which can behave as text or links.

<div class="demo-constrained demo-constrained--small">
  <ul class="u-list">
    <li class="u-list__item">Cucumber</li>
    <li class="u-list__item">Broccoli</li>
    <li class="u-list__item u-list__item--divider">Lemon</li>
    <li class="u-list__item">Lime</li>
  </ul>
</div>

<div class="demo-constrained demo-constrained--small">
  <ul class="u-list">
    <li class="u-list__item">Cucumber</li>
    <li class="u-list__item">Broccoli</li>
    <li class="u-list__item u-list__item--divider">Lemon</li>
    <li class="u-list__item">Lime</li>
  </ul>
</div>

List Links with Icons and Multiline Text

This example illustrates using .u-list--avatar-list and .u-list__item__icon, and multiline text with primary and secondary text styles.

<div class="demo-constrained demo-constrained--small">
  <ul class="u-list u-list--avatar-list">
    <li>
      <a href="javascript;;" class="u-list__item">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
          ></path>
        </svg>
        <span class="u-list__item__text u-list__item__text--multiline"
          ><span class="u-list__item__primary-text">Inbox</span
          ><span class="u-list__item__secondary-text">New messages</span></span
        >
      </a>
    </li>
    <li>
      <a href="javascript;;" class="u-list__item">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
          ></path>
        </svg>
        <span class="u-list__item__text u-list__item__text--multiline"
          ><span class="u-list__item__primary-text">Trash</span
          ><span class="u-list__item__secondary-text">Deleted messages</span></span
        >
      </a>
    </li>
  </ul>
</div>

<div class="demo-constrained demo-constrained--small">
  <ul class="u-list u-list--avatar-list">
    <li>
      <a href="javascript;;" class="u-list__item">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
          ></path>
        </svg>
        <span class="u-list__item__text u-list__item__text--multiline"
          ><span class="u-list__item__primary-text">Inbox</span
          ><span class="u-list__item__secondary-text">New messages</span></span
        >
      </a>
    </li>
    <li>
      <a href="javascript;;" class="u-list__item">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
          ></path>
        </svg>
        <span class="u-list__item__text u-list__item__text--multiline"
          ><span class="u-list__item__primary-text">Trash</span
          ><span class="u-list__item__secondary-text">Deleted messages</span></span
        >
      </a>
    </li>
  </ul>
</div>

List with Secondary Action

The following demonstrates support for an icon, checkbox, or radio controls to be associated with a list item. Text and icon buttons are also acceptable.

If including form controls, include aria-label on the input (see radio), or if labeled by the list text, use a label as the element for .u-list__item__text and include the for attribute for the input's id.

<div class="demo-constrained demo-constrained--medium">
  <ul class="u-list">
    <li class="u-list__item">
      <svg
        class="u-list__item__icon"
        focusable="false"
        viewBox="0 0 24 24"
        aria-hidden="true"
        role="presentation"
      >
        <path
          d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
        ></path>
      </svg>
      Single line with icon
      <span class="u-list__item__secondary-action">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
          ></path>
        </svg>
      </span>
    </li>
    <li class="u-list__item u-list__item--divider">
      <label for="list-checkbox" class="u-list__item__text">Checkbox label</label>
      <span class="u-list__item__secondary-action">
        <span class="u-checkbox">
          <input id="list-checkbox" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control"></span>
        </span>
      </span>
    </li>
    <li class="u-list__item u-list__item--divider">
      <span class="u-list__item__text u-list__item__text--multiline">
        <span class="u-list__item__primary-text">Radio</span>
        <span class="u-list__item__secondary-text">Optional secondary context</span>
      </span>
      <span class="u-list__item__secondary-action">
        <span class="u-radio">
          <input
            aria-label="Radio label"
            id="list-radio"
            name="list-radios"
            type="radio"
            class="u-radio__input"
          />
          <span class="u-radio__control"></span>
        </span>
      </span>
    </li>
  </ul>
</div>

<div class="demo-constrained demo-constrained--medium">
  <ul class="u-list">
    <li class="u-list__item">
      <svg
        class="u-list__item__icon"
        focusable="false"
        viewBox="0 0 24 24"
        aria-hidden="true"
        role="presentation"
      >
        <path
          d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
        ></path>
      </svg>
      Single line with icon
      <span class="u-list__item__secondary-action">
        <svg
          class="u-list__item__icon"
          focusable="false"
          viewBox="0 0 24 24"
          aria-hidden="true"
          role="presentation"
        >
          <path
            d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
          ></path>
        </svg>
      </span>
    </li>
    <li class="u-list__item u-list__item--divider">
      <label for="list-checkbox" class="u-list__item__text">Checkbox label</label>
      <span class="u-list__item__secondary-action">
        <span class="u-checkbox">
          <input id="list-checkbox" type="checkbox" class="u-checkbox__input" />
          <span class="u-checkbox__control"></span>
        </span>
      </span>
    </li>
    <li class="u-list__item u-list__item--divider">
      <span class="u-list__item__text u-list__item__text--multiline">
        <span class="u-list__item__primary-text">Radio</span>
        <span class="u-list__item__secondary-text">Optional secondary context</span>
      </span>
      <span class="u-list__item__secondary-action">
        <span class="u-radio">
          <input
            aria-label="Radio label"
            id="list-radio"
            name="list-radios"
            type="radio"
            class="u-radio__input"
          />
          <span class="u-radio__control"></span>
        </span>
      </span>
    </li>
  </ul>
</div>

Lists

Basic List

List Links with Icons and Multiline Text

List with Secondary Action

Properties

<List />

<ListItem />

<ListItemText />

<ListItemIcon />