Chi Documentation

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>

Titled

Add a title to a card by applying the class a-card__title to any heading element h1 - h6. The class will override the headings default margin for optimal rendering.

Title

This is a titled card

<div class="a-card">
  <div class="a-card__content">
    <h5 class="a-card__title">Title</h5>
    <p class="-text -m0">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">
    <h5 class="a-card__title">Title</h5>
    <p class="-text -mt0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
    <button class="a-btn -brand">Link</button>
  </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 src="a-card__hero" src="..." alt="Card Image">
  <div class="a-card__content">
    <p class="-text -m0">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 -m0">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 -brand">Link</button>
    <button class="a-btn -ml1">Link</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 -m0">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 -brand">Link</button>
    <button class="a-btn -ml1">Link</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 -m0">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 -brand">Link</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 -m0">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 -brand">Link</button>
  </div>
</div>

Footer Small

Apply the class -small 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.

Link
<div class="a-card">
  <div class="a-card__content">
    <p class="-text -m0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
  <div class="a-card__footer -small">
    <a class="-text" href="#">Link</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">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</p>
  </div>
</div>

Header Right Aligned

Apply the class -align--right on a-card__header to right 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--right">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">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">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">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">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">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 -small 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 -small">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">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">
    <h5 class="a-card__title">Title</h5>
  </div>
  <div class="a-card__content">
    <p class="-text -m0">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 -brand">Link</button>
  </div>
</div>

Header Small + Footer Small

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

Title

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

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