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.

Requirements

• 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.