Design Kit

Card

Cards are flexible containers used for displaying content.

Examples

To display a card, use the class a-card.

Base

This is a card
<div class="a-card">
  <div class="a-card__content">
    This is a card
  </div>
</div>

Active

Render an active state card with the class -active.

This is an active card
<div class="a-card -active">
  <div class="a-card__content">
    This is an active card
  </div>
</div>

Active Alt

Render an alternative active state card with the class -active--alt.

This is an active alt card
<div class="a-card -active--alt">
  <div class="a-card__content">
    This is an active alt card
  </div>
</div>

Empty

Render an empty state card with the class -empty.

Add Product

<div class="a-card -empty">
  <div class="a-card__content">
    <i class="a-icon a-card__icon icon-circle-plus-outline -md"></i>
    <p class="-text -m--0">Add Product</p>
  </div>
</div>

Titled

Add a title to a card by applying the class a-card__title.

Title

This is a titled card

<div class="a-card">
  <div class="a-card__content">
    <div class="a-card__title">Title</div>
    <p class="-text -m--0">This is a titled card</p>
  </div>
</div>

Titled with content

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__content">
    <div class="a-card__title">Title</div>
    <p class="-text -mt--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
    <button class="a-btn -primary">Action</button>
  </div>
</div>

Titled with content and icon

Title

4 Running

6 Pending

Title

4 Running

6 Pending

<!-- Base -->
<div class="a-card">
  <div class="a-card__content -d--flex -flex--column -justify-content--center -align-items--center -text--center">
    <div class="a-card__title">Title</div>
    <i class="a-icon a-card__icon icon-atom -sm--3"></i>
    <p class="-text--small -mb--0 -mt--1">4 Running</p>
    <p class="-text--smaller -m--0 -text--grey">6 Pending</p>
  </div>
</div>
<!-- Active -->
<div class="a-card -active">
  <div class="a-card__content -d--flex -flex--column -justify-content--center -align-items--center -text--center">
    <div class="a-card__title">Title</div>
    <i class="a-icon a-card__icon icon-atom -sm--3"></i>
    <p class="-text--small -mb--0 -mt--1">4 Running</p>
    <p class="-text--smaller -m--0 -text--grey">6 Pending</p>
  </div>
</div>

Hero

Add a full width image or banner to the top of a card by applying the class a-card__hero.

Hero Image

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec, ultrices in turpis. Donec sit amet consectetur elit.

<div class="a-card">
  <img class="a-card__hero" src="..." alt="Card Image">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec, ultrices in turpis. Donec sit amet consectetur elit.</p>
  </div>
</div>

Footer

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer">
    <button class="a-btn -primary">Action 1</button>
    <button class="a-btn -ml--1">Action 2</button>
  </div>
</div>

Footer Right Aligned

Apply the class -align--right on a-card__footer to right align its contents.

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -align--right">
    <button class="a-btn">Action 2</button>
    <button class="a-btn -primary -ml--1">Action 1</button>
  </div>
</div>

Footer Center Aligned

Apply the class -align--center on a-card__footer to center align its contents.

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -align--center">
    <button class="a-btn -primary">Action</button>
  </div>
</div>

Footer No Border

Apply the class -noBorder on a-card__footer to remove the default border.

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -noBorder">
    <button class="a-btn -primary">Action</button>
  </div>
</div>

Footer Small

Apply the class -sm on a-card__footer to reduce its padding.

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

Action
<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -sm">
    <a class="-text" href="#">Action</a>
  </div>
</div>

Header

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__header">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Header Center Aligned

Apply the class -align--center on a-card__header to center align its contents.

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__header -align--center">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Header No Border

Apply the class -noBorder on a-card__header to remove the default border.

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__header -noBorder">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Header Small

Apply the class -sm on a-card__header to reduce its padding.

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__header -sm">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Header + Footer

Further customize cards by adding both headers a-card__header and footers a-card__footer.

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card">
  <div class="a-card__header">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer">
    <button class="a-btn -primary">Action</button>
  </div>
</div>

Header Small + Footer Small

Reduce the size of the header and footer by applying the class -sm to each element.

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

Action
<div class="a-card">
  <div class="a-card__header -sm">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -sm">
    <a class="-text" href="#">Action</a>
  </div>
</div>

Portal base

Title

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card -portal">
  <div class="a-card__header -sm">
    <div class="a-card__title">Title</div>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Portal with tabs

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.

<div class="a-card -portal">
  <div class="a-card__tabs">
    <ul class="a-tabs -xs">
      <li class="-active">
        <a href="#">Active Tab</a>
      </li>
      <li>
        <a href="#">Tab Link</a>
      </li>
      <li>
        <a href="#">Tab Link</a>
      </li>
    </ul>
  </div>
  <div class="a-card__content">
    <p class="-text -m--0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>