Card

Active #

Render an active state card with the class -active.

No Border #

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

Empty #

Render an empty state card with the class -empty.

Titled #

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

Center Aligned #

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

Titled with content and icon #

Animate on Hover #

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

Hero #

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

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.

Header Center Aligned #

Apply the class -align--center on chi-card__header to center align its contents.

Header No Border #

Apply the class -no-border on chi-card__header to remove the default border.

Header Small #

Apply the class -sm on chi-card__header to reduce its padding.

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.