List

HTML

A list is a container that groups items.

When wrapping a list with a .o-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="o-list o-list--large">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-list o-list--medium">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-list o-list--small">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-list o-list--large o-list--divide">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-list o-list--large o-list--hover">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-list o-list--large o-list--pointer">
  <li>
    <div>
      <h3>First item</h3>
      <p>Description of the first item</p>
    </div>

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

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

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

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

    <div class="o-list__action">
      <button type="button" class="o-button o-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="o-card">
  <div class="o-card__header">
    <h3>List title</h3>
  </div>
  <div class="o-card__body">
    <ul class="o-list o-list--large o-list--divide o-list--no-gutter o-list--hover o-list--pointer">
      <li>
        <div>
          <h3>First item</h3>
          <p>Description of the first item</p>
        </div>

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

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

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

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

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

Usage

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