Card

Cards used for featuring information highlight important and valuable content for users, as they improve visibility and engagement. They are useful in enhancing accessibility by providing clear and focused content. Cards are also helpful to organize and streamline information on a page, helping create or maintain an organized layout.

Cards can be used for navigational purposes, leading users to quickly engage with another page. The primary advantage for using cards for navigational purposes is that they carry additional visual weight as a containerized object on the page. Additionally, cards accommodate both media and text in order to provide more context about the link’s destination.

As an example, using cards to present related content is a way to encourage users to expand their knowledge about a topic by navigating to internal or external articles that supplement the page users are currently on. In this use case, use cards to place links to articles, standards, or any other form of content related to the page.

There are many content combinations for a card, which allows for various applications of the component. It is possible to include media, body content, and footer. The header must always contain a title, while an icon and a subtitle are optional elements.

Always horizontally align cards within a group from the left to the right side of the screen. The height of the largest card in a group will determine the height for all cards. When the horizontal space is limited,stack them vertically, while preserving their original order.

When placed in groups, cards should present collections of similar content. Following the alignment guidelines, the recommended space between each card should be a multiple of 4 pixels, horizontally and vertically (read more about the baseline grid on the grid foundations page). All units of measurement are in pixels.

Cards titles must be clear and purposeful
The purpose of the card should be clearly understood from the card title alone.
WCAG 2.1: 1.3.1. Info and Relationships, 2.4.6 Headings and Labels

Card links must be unique and descriptive
Card links should follow existing DDS link guidance. Links should always describe their purpose, either explicitly in the link text, or by clear visual association with the card title (and with additional screen reader-only text provided so that the destination is still clear from the link alone).
WCAG 2.1: 2.4.4 Link Purpose in Context

Any charts and meaningful images should have alternative text
If charts are included, the information conveyed should always be described with alternative text. Images which convey additional information (and are therefore not decorative) should also have a meaningful, accurate description that is equivalent to the visual information being communicated.
WCAG 2.1: 1.1.1 Non-text Content

Do not rely on icons to communicate meaning
If using icons, they should be chosen to reinforce the card’s purpose, as indicated by the title. Always choose icons with the widest recognizability, as the icon itself shouldn’t confuse people.

Do not mix the usage of links and buttons
Remember links are for navigating, not triggering actions. Misuse causes problems for keyboard and screen reader users who interact with these elements differently and will be confused if they hear them announced by the wrong role. For more information about when to use each, see the link and button guidance.

Use large groups of cards sparingly
Each card’s title will add a heading to the semantic page structure. As a result, larger groupings of cards will increase the number of page headings very quickly, which can degrade the experience for screen reader users and other people who choose to navigate by headings. If you have many cards in a single section, look for ways to break them up into smaller grouped sections with subheadings.

Capitalization
Titles and subtitles should be written in sentence case, and content in the body section will follow writing standards. Calls to action capitalization depends on which trigger is attached: links are sentence case, while buttons are title case.

Title and subtitle
Use concise titles and subtitles describing the purpose of the card. Subtitles are optional and should provide complementary information if necessary.
Do: Card guidelines
Don’t: Read about use cases and accessibility for the card component

Body content
If used with a call to action, include a few lines to describe what event the action triggers. For example, if used for displaying related articles, the body copy should succinctly summarize the article it navigates to. In informative contexts, concisely explain or define the card’s title or topic.