Card Principles (Draft)

Inspired by the Landscape Analysis

Questions

• Do we want to mention visual separateness? If so, how separate?
• How important is it for them to be "what you see is what you get"? (i.e., variable height vs. scrolling)
• Regarding "cards as navigation," do we think of cards as "a summary of a thing that leads to more details about that thing" or possibly also "a topic/category that leads to a collection of other things in that category"? (Maybe they're less semantic and more of a presentational option, like displaying a link as underlined text or a button?)

Approach 1

Definition: Cards are containers for representing a collection of similar or related objects.

Cards are:

• Singular: They are visually separate from each other and stand alone as independent items.
• Variable: They may contain a variety of content types and lengths for each object within a collection.
• Browseable: They contain a summary of information about the object.
• Interactive: They include options for getting more details about the object or taking action.

Cards are not:

• Lists: For scannable, dense collections of uniform content, use a list.
• Buttons: For calls-to-action, use a button.
• Tables: For grids of numeric content (or a mix of numeric and text content), use a table.
• Grids/Image Grids: For uniform collections of primarily visual content, use a grid.
• Controls: For collections of controls, such as filters or navigation, use nav or aside.
• Articles: For long-form body content, use article.
• Accordions: For primarily text title/detail content, use an accordion.

Approach 2

Definition: Cards are a visually-separate way to present a summary of a collection of items or topics.

When to use

• Collection of related items
• Content of variable length or attributes
• Scannable summary with link to more details

When to consider

• Collection of items with variable content without calls-to-action or more details
• Scannable summary with option to scroll/expand for more details
• Navigation with more detail than just a topic/category

When to use something else

• For scannable, dense collections of uniform content, use a list.
• For calls-to-action, use a button.
• For grids of numeric content (or a mix of numeric and text content), use a table.
• For uniform collections of primarily visual content, use a grid.
• For collections of controls, such as filters or navigation, use nav or aside.
• For long-form body content, use article.
• For primarily text title/detail content, use an accordion.