Design Kit

Card

Cards are flexible containers used for displaying content.

Examples#

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

Base#

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

Active#

Render an active state card with the class -active.

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

Active Alt#

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

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

No Border#

Render a card without a border using the class -no-border.

This is a card with no border
<div class="chi-card -no-border">
  <div class="chi-card__content">
    <div class="chi-card__caption">This is a card with no border</div>
  </div>
</div>

Empty#

Render an empty state card with the class -empty.

This is an empty card
<div class="chi-card -empty">
  <div class="chi-card__content">
    <div class="chi-card__caption">This is an empty card</div>
  </div>
</div>

Titled#

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

Title
This is a titled card
<div class="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <div class="chi-card__caption">This is a titled card</div>
  </div>
</div>

Center Aligned#

Center align a card by applying the class -align--center.

Title
This is a center aligned card
<div class="chi-card -align--center">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <div class="chi-card__caption">This is a center aligned card</div>
    <div class="chi-card__actions">
      <button class="chi-button -primary">Action</button>
    </div>
  </div>
</div>

Titled with content and icon#

Title
Meta LabelSublabel
Title
Meta LabelSublabel
<!-- Base -->
<div class="chi-card -align--center">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <i class="chi-card__icon chi-icon icon-atom -sm--3"></i>
    <div class="chi-card__caption">
      <span class="-text--sm">Meta Label</span>
      <span class="-text--xs -text--grey">Sublabel</span>
    </div>
  </div>
</div>
<!-- Active -->
<div class="chi-card -active -align--center">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <i class="chi-card__icon chi-icon icon-atom -sm--3"></i>
    <div class="chi-card__caption">
      <span class="-text--sm">Meta Label</span>
      <span class="-text--xs -text--grey">Sublabel</span>
    </div>
  </div>
</div>

Animate on Hover#

Animate a card on hover by applying the class -hover--animate.

Title
Meta LabelSublabel
Title
Meta LabelSublabel
Title
Meta LabelSublabel
Title
Meta LabelSublabel
<!-- Base -->
<div class="chi-card -align--center -hover--animate">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <i class="chi-card__icon chi-icon icon-atom -sm--3"></i>
    <div class="chi-card__caption">
      <span class="-text--sm">Meta Label</span>
      <span class="-text--xs -text--grey">Sublabel</span>
    </div>
  </div>
</div>
<!-- Active -->
<div class="chi-card -active -align--center -hover--animate">
  <div class="chi-card__content">
    <div class="chi-card__title">Title</div>
    <i class="chi-card__icon chi-icon icon-atom -sm--3"></i>
    <div class="chi-card__caption">
      <span class="-text--sm">Meta Label</span>
      <span class="-text--xs -text--grey">Sublabel</span>
    </div>
  </div>
</div>

Hero#

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

Hero Image

This is a hero card
<div class="chi-card">
  <img class="chi-card__hero" src="..." alt="Card Image">
  <div class="chi-card__content">
    <div class="chi-card__caption">This is a hero card</div>
  </div>
</div>

Footer#

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-card__footer">
    <button class="chi-button -primary">Action 1</button>
    <button class="chi-button">Action 2</button>
  </div>
</div>

Footer Right Aligned#

Apply the class -align--right on chi-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="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-card__footer -align--right">
    <button class="chi-button">Action 2</button>
    <button class="chi-button -primary">Action 1</button>
  </div>
</div>

Footer Center Aligned#

Apply the class -align--center on chi-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="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-card__footer -align--center">
    <button class="chi-button -primary">Action</button>
  </div>
</div>

Footer No Border#

Apply the class -no-border on chi-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="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-card__footer -no-border">
    <button class="chi-button -primary">Action</button>
  </div>
</div>

Footer Small#

Apply the class -sm on chi-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="chi-card">
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-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="chi-card">
  <div class="chi-card__header">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Header Center Aligned#

Apply the class -align--center on chi-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="chi-card">
  <div class="chi-card__header -align--center">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Header No Border#

Apply the class -no-border on chi-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="chi-card">
  <div class="chi-card__header -no-border">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Header Small#

Apply the class -sm on chi-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="chi-card">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Header + Footer#

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

Title
Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="chi-card">
  <div class="chi-card__header">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-card__footer">
    <button class="chi-button -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="chi-card">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
  <div class="chi-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="chi-card -portal">
  <div class="chi-card__header -sm">
    <div class="chi-card__title">Title</div>
  </div>
  <div class="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Portal with tabs#

Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.
<div class="chi-card -portal">
  <div class="chi-card__tabs">
    <ul class="chi-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="chi-card__content">
    <div class="chi-card__caption">Aenean pretium massa sed vehicula porta. Phasellus id metus felis. Ut felis magna, facilisis ut malesuada nec.</div>
  </div>
</div>

Web Component#

Properties#

Web component coming soon

Accessibility#

Accessibility guidelines coming soon