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"></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
.
<!-- 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
<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.
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.
Footer No Border
Apply the class -no-border
on chi-card__footer
to remove the default border.
Footer Small
Apply the class -sm
on chi-card__footer
to reduce its padding.
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.
Portal
Use portal themed cards for displaying content in Enterprise Portals. In general, all Enterprise Portal content should be contained within a card.
Base
<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
<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.
<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>