Card

Cards are flexible containers used for displaying content.

Examples

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

Base #

This is a card


Render an active state card with the class -active.

This is an active card

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

This is a card with no border

Empty #

Render an empty state card with the class -empty.

This is an empty card


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

Title
This is a titled card

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

Title
This is a center aligned card
Title
Meta LabelSublabel
Title
Meta LabelSublabel

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

Title
Meta LabelSublabel
Title
Meta LabelSublabel
Title
Meta LabelSublabel
Title
Meta LabelSublabel

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

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.

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.

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.

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.

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.

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.


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.

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.

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.

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.

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.

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon