---
layout: styleguide
type: component
title: Card
lead: A sub-component used in many components in the system, the card is a useful metaphor that supports the grouping of information.
---
Design complete
Card - Large (v4)
Card title
The body of the card
Requirements
Spacing: A card always includes at least the default size (15px) of padding. Margin can be overrode as necessary to allow cards to fill the viewport on smaller hand-held devices.
Title: The title of the card in a list is often a title of the object it describes. Titles and names can be long thus in a card they span the full width of the card.
Shadow: Cards always have some box-shadow applied to give the appearance of depth excluding when they are presented in a list of 10 or more where the shadow creates a radiating pattern (see list variation below). The card above is at level 1. Levels can be increased up to level 5 to give greater depth and separation but should only be done so sparingly. Level 1 is the default.
When to use
The uses of cards are too numerous to mention.
When to consider something else
Avoid cards for long content. If the focus is reading the content then the card will likely just get in the way and be visual noise.
All of the aforementioned card requirements from the Card - Large variation excluding the box shadow. Box shadow on cards that are in a list of 10 or more creates a radiating visual pattern that is distracting and thus should be avoided. It also takes up space that isn't appropriate in a long list.
When to use
In a list context where many cards will be right next to one another.