Skip to main content

Cards

Cards are a common minimalistic design tool used to segregate sections of your content.

Basic Card

Dividers

Colors

Add --brand , --info , --warning , --successful or --error modifier to the card items to change their background colors.

Use the header, body and footer element classes to construct some nice cards.

You can push the footer buttons right to the edges of the card using .c-card__footer--block .

With Images

Images are best placed within the card at the same level as the header, body and footer

Card Items

Grouped Items

Grouping card items couldn't be easier. Add the .c-card--grouped modifier which will remove the item borders. Then insert a .c-card__divider element into the list, which creates a horizontal line.