Card List

Card lists are implemented by adding the .card class to a <div role="list"> or a <ul> element.

The examples below use the <ul> approach but you can in case you want to use a different container element, check out [role=list] which behaves the same way.

Basic Usage

You can indicate that a certain item is active by using aria-current="true".

<ul class="card">
  <li>Item 1</li>
  <li aria-current="true">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Intent Variants

To convey intent and importance, card lists can be styled with different variants:

See code

<section class="d-flex gap-d">
  <ul class="card primary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card secondary">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card contrast">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card success">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card info">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card warning">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card danger">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</section>

Modifiers

.ghost creates transparent background card lists with colored text and borders

See code

<section class="d-flex gap-d">
  <ul class="card primary ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card secondary ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card contrast ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card success ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card info ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card warning ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card danger ghost">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</section>

.subtle creates card lists with a more muted appearance.

See code

<section class="d-flex gap-d">
  <ul class="card primary subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card secondary subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card contrast subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card success subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card info subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card warning subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card danger subtle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</section>

.striped creates card lists with alternating background colors for better readability.

See code

<section class="d-flex gap-d">
  <ul class="card primary subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card secondary subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card contrast subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card success subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card info subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card warning subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
  
  <ul class="card danger subtle striped">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</section>

Variants applied individually to an item

You can also use variant classes on individual items to indicate their intent and importance.

See code

<section class="auto-grid">
  <ul class="card">
    <li class="primary">Primary</li>
    <li class="secondary">Secondary</li>
    <li class="contrast">Contrast</li>
    <li class="success">Success</li>
    <li class="info">Info</li>
    <li class="warning">Warning</li>
    <li class="danger">Danger</li>
  </ul>
  
  <ul class="card">
    <li class="primary ghost">Primary</li>
    <li class="secondary ghost">Secondary</li>
    <li class="contrast ghost">Contrast</li>
    <li class="success ghost">Success</li>
    <li class="info ghost">Info</li>
    <li class="warning ghost">Warning</li>
    <li class="danger ghost">Danger</li>
  </ul>
  
  <ul class="card">
    <li class="primary subtle">Primary</li>
    <li class="secondary subtle">Secondary</li>
    <li class="contrast subtle">Contrast</li>
    <li class="success subtle">Success</li>
    <li class="info subtle">Info</li>
    <li class="warning subtle">Warning</li>
    <li class="danger subtle">Danger</li>
  </ul>
</section>