List Component

Default List

Text 1
Text 2
Text 3

<div class="list">
  <ul>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-folder-16" />
          </svg>
        </span>
        <span class="list__body"> Text 1 </span>
      </div>
    </li>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-file-16" />
          </svg>
        </span>
        <span class="list__body"> Text 2 </span>
      </div>
    </li>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-key-16" />
          </svg>
        </span>
        <span class="list__body"> Text 3 </span>
      </div>
    </li>
  </ul>
</div>

Actionable list

List also supports buttons or links as a list item. Actionable components, such as a switch, can be added in the trailing portion of the list, but they cannot be used in conjunction with buttons or link.

Link
Item 1 with an action

<div class="list">
  <ul>
    <li>
      <button>Button</button>
    </li>
    <li>
      <a href="www.ebay.com">
        <span class="list__body"> Link </span>
        <span class="list__trailing">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-chevron-right-16" />
          </svg>
        </span>
      </a>
    </li>
    <li>
      <div>
        <span class="list__body" id="switch-in-list">
          Item 1 with an action
        </span>
        <span class="list__trailing">
          <span class="switch">
            <span
              aria-labelledby="switch-in-list"
              class="switch__control"
              role="switch"
              tabindex="0"
              aria-checked="false"
            />
            <span class="switch__button" />
          </span>
        </span>
      </div>
    </li>
  </ul>
</div>

List with dividers

To add a divider, add a hr element after the list item.

Item 1

Item 2
Item with a large amount of text that should wrap and go to the next line. If there is too much it would wrap

<div class="list">
  <ul>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-folder-16" />
          </svg>
        </span>
        <span class="list__body"> Item 1 </span>
      </div>
    </li>
    <hr />
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-file-16" />
          </svg>
        </span>
        <span class="list__body"> Item 2 </span>
      </div>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-folder-16" />
          </svg>
        </span>
        <span class="list__body">
          Item with a large amount of text that should wrap and go to the next
          line. If there is too much it would wrap
        </span>
      </div>
    </li>
  </ul>
</div>

List with variable width

The list will adjust to the width of the container it is in.

Item 1
Item 2

<div class="list">
  <ul>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-file-16" />
          </svg>
        </span>
        <span class="list__body"> Item 1 </span>
      </div>
    </li>
    <li>
      <div>
        <span class="list__leading">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-file-16" />
          </svg>
        </span>
        <span class="list__body"> Item 2 </span>
        <span class="list__trailing">
          <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
            <use href="#icon-money-back-guarantee-16" />
          </svg>
        </span>
      </div>
    </li>
  </ul>
</div>

List with fieldset

For an interactive list, you can add a fieldset with radios or checkboxes

Choose an Option

Option 1

Option 2

Option 3

<div class="list">
  <fieldset>
    <legend>Choose an Option</legend>
    <div>
      <span class="radio list__leading">
        <input
          class="radio__control"
          id="list-radio-1"
          type="radio"
          value="1"
          name="list-radio-group"
        />
        <span class="radio__icon" hidden>
          <svg
            class="radio__unchecked"
            height="18"
            width="18"
            aria-hidden="true"
          >
            <use href="#icon-radio-unchecked-18" />
          </svg>
          <svg class="radio__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-radio-checked-18" />
          </svg>
        </span>
      </span>
      <label class="list__body" for="list-radio-1"> Option 1 </label>
    </div>
    <div>
      <span class="radio list__leading">
        <input
          class="radio__control"
          id="list-radio-2"
          type="radio"
          value="2"
          name="list-radio-group"
        />
        <span class="radio__icon" hidden>
          <svg
            class="radio__unchecked"
            height="18"
            width="18"
            aria-hidden="true"
          >
            <use href="#icon-radio-unchecked-18" />
          </svg>
          <svg class="radio__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-radio-checked-18" />
          </svg>
        </span>
      </span>
      <label class="list__body" for="list-radio-2"> Option 2 </label>
    </div>
    <div>
      <span class="list__leading radio">
        <input
          class="radio__control"
          id="list-radio-3"
          type="radio"
          value="3"
          name="list-radio-group"
        />
        <span class="radio__icon" hidden>
          <svg
            class="radio__unchecked"
            height="18"
            width="18"
            aria-hidden="true"
          >
            <use href="#icon-radio-unchecked-18" />
          </svg>
          <svg class="radio__checked" height="18" width="18" aria-hidden="true">
            <use href="#icon-radio-checked-18" />
          </svg>
        </span>
      </span>
      <label class="list__body" for="list-radio-3"> Option 3 </label>
    </div>
  </fieldset>
</div>

Link Component Listbox Button Component