Card Group

Card groups are implemented by adding the .card class to an element with [role=group] attribute which will make the element and its children look like a Card List except stacked horizontally.

Basic Usage

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

<div class="card" role="group">
  <span>
    Processed
  </span>
  <span>
    Shipped
  </span>
  <span aria-current="true">
    In route
  </span>
  <span aria-disabled="true">
    Delivered
  </span>
</div>

Intent Variants

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

See code

<div class="card primary" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card secondary" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card contrast" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card success" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card info" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card warning" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card danger" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

Modifiers

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

See code

<div class="card primary ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card secondary ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card contrast ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card success ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card info ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card warning ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card danger ghost" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

.subtle creates card lists with a more muted appearance.

See code

<div class="card primary subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card secondary subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card contrast subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card success subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card info subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card warning subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card danger subtle" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

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

See code

<div class="card primary subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card secondary subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card contrast subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card success subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card info subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card warning subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

<div class="card danger subtle striped" role="group">
  <span>
    Item 1
  </span>
  <span>
    Item 2
  </span>
  <span>
    Item 3
  </span>
  <span>
    Item 4
  </span>
</div>

Variants applied individually to an item

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

See code

<div class="card" role="group">
  <div class="primary">
    Primary
  </div>
  <div class="secondary">
    Secondary
  </div>
  <div class="contrast">
    Contrast
  </div>
  <div class="success">
    Success
  </div>
  <div class="info">
    Info
  </div>
  <div class="warning">
    Warning
  </div>
  <div class="danger">
    Danger
  </div>
</div>

<div class="card" role="group">
  <div class="primary ghost">
    Primary
  </div>
  <div class="secondary ghost">
    Secondary
  </div>
  <div class="contrast ghost">
    Contrast
  </div>
  <div class="success ghost">
    Success
  </div>
  <div class="info ghost">
    Info
  </div>
  <div class="warning ghost">
    Warning
  </div>
  <div class="danger ghost">
    Danger
  </div>
</div>

<div class="card" role="group">
  <div class="primary subtle">
    Primary
  </div>
  <div class="secondary subtle">
    Secondary
  </div>
  <div class="contrast subtle">
    Contrast
  </div>
  <div class="success subtle">
    Success
  </div>
  <div class="info subtle">
    Info
  </div>
  <div class="warning subtle">
    Warning
  </div>
  <div class="danger subtle">
    Danger
  </div>
</div>