Card

There are two card styles available to use in Vanilla.

A card will expand to fill the full width of its parent container.

All card styles, but in particular the highlighted card, should be used sparingly.

Basic card

The purpose of the basic card is to display information, without user interaction.

View example of the default card pattern

Highlighted card

The highlighted card should be used when you can interact with the content.

View example of the highlighted card pattern

Overlay card

The purpose of the card overlay pattern is to make the text visible in conjunction with a strip image.

View example of the patterns card overlay

Optional header

Both cards have styles for an optional header.

The header will accept either text or an image with a max height of 32 pixels and has a border below.