List

HTML

A list is a container that groups items.

When wrapping a list with a .card element use the no_gutter attribute that overflows card's body gutter. This makes the list take full width of it's parent card.

You can add horizontal dividers between list items by specifying divide attribute.

Add a hover effect to a list with hover attribute.

Large size

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--large">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Medium size

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--medium">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Small size

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--small">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Divide style

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--large list--divide">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Hover style

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--large list--hover">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Pointer style

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <ul class="list list--large list--pointer">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Second item</h3>
      <p>Description of the second item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>

  <li>
    <div>
      <h3>Third item</h3>
      <p>Description of the third item</p>
    </div>

    <div class="list__action">
      <button type="button" class="button button--small">Action</button>
    </div>
  </li>
</ul>
  

Inside a card, divided, hover, pointer

List title

  • First item

    Description of the first item

  • Second item

    Description of the second item

  • Third item

    Description of the third item

HTML
    <div class="card">
  <div class="card__header">
    <h3>List title</h3>
  </div>
  <div class="card__body">
    <ul class="list list--large list--divide list--no-gutter list--hover list--pointer">
      <li>
        <div>
          <h3>First item</h3>
          <p>Description of the first item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small button--icon-only"><i class="icon-remove"></i></button>
        </div>
      </li>

      <li>
        <div>
          <h3>Second item</h3>
          <p>Description of the second item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small button--icon-only"><i class="icon-remove"></i></button>
        </div>
      </li>

      <li>
        <div>
          <h3>Third item</h3>
          <p>Description of the third item</p>
        </div>

        <div class="list__action">
          <button type="button" class="button button--small button--icon-only"><i class="icon-remove"></i></button>
        </div>
      </li>
    </ul>
  </div>
</div>
  

Usage

Attribute Description Possible values
size Set with .list--{size} class large, medium, small
divide Set with .list--divide class divide
hover Set with .list--hover class hover
no-gutter Set with .list--no-gutter class. Add negative margins to side at the $spacing-base size. It's common use in cards. no-gutter