Card
On this page
Usage
Cards are used to display basic content or long paragraphs of text. Secondary and Default calls to action may be used.
For examples of patterns which use or modify Card, see the card patterns page.
Patterns
There are several card patterns that can be used for a variety of use cases. To learn more, visit the Card patterns page.
Content cards
Cards have the potential to contain lots of content, like a combination of text, links, images, multimedia, etc. Ensure content serves the use case, but keep things simple at the same time. Don’t use too much content in one card, distribute extra content to other cards or somewhere else on the page. A Sticky card is a kind of card that can contain similar content, but it sticks to the side of a page and it’s always present until a user dismisses it.
Character count
The recommended maximum character count for the elements of a card are listed below and include spaces.
Element Character count
Title 20 Headline 50 Body text 165 Footer 55
Grouping
Different card styles can sometimes be grouped together. They can be arranged in a grid horizontally or vertically, depending on available space or screen size. Be sure to only group cards together that have similar styles or content. For example, grouping a basic card with a pricing card will look bad because they’re not very similar.
These cards can be grouped together because they have similar styles and content
Layout
Cards are small layouts that should be arranged on a grid and not float randomly in larger layouts. Cards have a minimum width of four columns and a maximum width of six columns.
Other components
Cards can include complex components if necessary. For example, the Filter pattern requires an Accordion or a Disclosure to sort a content set. Don't place any other complex components in card layouts.
Variants
Promo
A promo should display content related to the current experience but isn’t tied to the flow which the user is reading. It was established as a variant of card because it is also a container that uses similar patterns.
Standard promo
A standard promo should contain only a heading and a call to action, which allows its content to stay separate from the rest of the page without being too prominent.
Featured promo
A featured promo can contain a heading, additional body copy, call to action, and an image. This allows it to stand out more and give more information than a standard promo.
Full-width promo
A full-width promo is more interruptive than the other configurations. It’s best used on pages that have section bands.
Narrow promo
A narrow promo can be used if the promo content needs to fit in a small area, like in a sidebar.
Best practices
Card width
In a 12-column layout, use a minimum width of four columns for a card. The maximum number of cards that should be used in a row is three.
Do not make cards narrower than 4 columns. This may not give enough space for content within the card.
Call to action variants in cards
Use secondary or default calls to action in most cards.
Do not use a primary call to action in any card unless the primary action for the whole page is positioned inside of that card.
Number of calls to actions in cards
Use up to two calls to action in a card. They can be two different variants.
Do not use more than two calls to action in a card. This could make it harder for the user to understand what action to take next.
Promo
Because promo is used for special promotional content only, promos should typically appear individually.
Do not group multiple promos together as if they were a regular card group.
Behavior
Vertical height
The vertical height of cards depends on how much content is placed inside. If there are multiple cards in a row, the vertical height of each of them may be determined by the tallest card. Don’t place inconsistent amounts of content in cards, as this will impact how scannable the group will appear to users.
Authors may choose to have cards fill the maximum vertical space in a row or not, depending on whether they want that or not.
Interactivity
If a card contains only one link destination, the entire container and any elements inside should all be interactive. Otherwise, each interactive element should continue to be interactive, but not the card container.
Interaction states
Since cards can consist of a variety of elements, refer to the specific interaction states that are assigned to each style and component for more information.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
