Card
Examples
To display a card, use the class chi-card
.
Base #
<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
.
<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
.
<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
.
<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
.
<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
.
<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 #
<!-- 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" aria-hidden="true"></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" aria-hidden="true"></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
.
<!-- 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" aria-hidden="true"></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" aria-hidden="true"></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
<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 Right Aligned #
Apply the class -align--right
on chi-card__footer
to right align its contents.
Footer Center Aligned #
Apply the class -align--center
on chi-card__footer
to center align its contents.
Header #
Apply the class chi-card__header
to include a header section to the card.
<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.
<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.
<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.
<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
.
Header Small + Footer Small #
Reduce the size of the header and footer by applying the class -sm
to each element.