Pattern Library

Lists

Lists are a powerful component that can be used to display a wide variety of information in a quickly scannable way.

Details list

A detailed list to display multiple rows and columns of information with actions associated with each row.

User
Email
Location
Picture of Shōtarō Kaneda
SK

Shōtarō Kaneda

kaneda@gmail.com

Neo-Tokyo, Japan

Picture of Mechagodzilla
M

Mechagodzilla

mechagodzilla@gmail.com

Tokyo, Japan

Picture of Powdered Toast Man
PT

Powdered Toast Man

toastman@gmail.com

City Hicks, TN

Picture of Boba Fett
BF

Boba Fett

bobafett@gmail.com

Kamino

Picture of Will Smith
WS

Will Smith

willsmith@gmail.com

Bel Air, CA

<div class="list">
  <div class="list__header">
    <div class="list__headerItem">User</div>
    <div class="list__headerItem">Email</div>
    <div class="list__headerItem">Location</div>
  </div>

  <div class="list__wrapper">
    <div class="list__item">
      <div class="list__itemColumn">
        <div class="avatar avatar--small" title="Shōtarō Kaneda">...</div>
        <p>Shōtarō Kaneda</p>
      </div>
      <div class="list__itemColumn"><p>kaneda@gmail.com</p></div>
      <div class="list__itemColumn"><p>Neo-Tokyo, Japan</p></div>
      <div class="list__itemActions"><button class="list__buttonIcon"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></button></div>
    </div>
    <div class="list__item">
      <div class="list__itemColumn">
        <div class="avatar avatar--small" title="Mechagodzilla">...</div>
        <p>Mechagodzilla</p>
      </div>
      <div class="list__itemColumn"><p>mechagodzilla@gmail.com</p></div>
      <div class="list__itemColumn"><p>Tokyo, Japan</p></div>
      <div class="list__itemActions"><button class="list__buttonIcon"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg></button></div>
    </div>
  </div>
</div>