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>

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

Apply the class chi-card__footer to include a footer section to the card.

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

Apply the class chi-card__header to include a header section to the card.

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

Use portal themed cards for displaying content in Enterprise Portals. In general, all Enterprise Portal content should be contained within a card.

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>

Highlight

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

Use portal themed cards with tabs for organizing Enterprise Portal card content into separate but related views.

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 -sm">
      <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