Card

When to use

From a navigational perspective, cards are similar to the link component. When used for featured information or related content, they are comparable to a list or a table component. In the latter instances, for example, ecommerce experiences will often include a toggle to switch between a list and card view.

Component	Use cases
Card	Used for navigation purposes, featured information or related content, depending on context and elements added. As content containers, they are useful to organize information consistently within a page.
Link	Use to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.
List	A list presents a group of related information in a scannable format.
Table	A table displays complex groups of information for the purpose of reference, comparison, or choice.

Usage

Cards display content in a visually organized way, maintaining a consistent size within the screen for the information added. Different use cases may require adding different elements to the card. Assess the experience’s context to determine what content options are appropriate to include. Cards intended to have a navigational purpose should have a link in the footer, for example.

Cards can be used for navigational purposes, leading users to quickly engage with another page. The primary advantage of 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.

Standarts

Cards titles must be clear and purposeful.

Card links must be unique and descriptive.

Any charts and meaningful images should have alternative text.

Do not rely on icons to communicate meaning.

Do not mix the usage of links and buttons.

Use large groups of cards sparingly.

Titles and subtitles should be written in sentence case, and content in the body section will follow writing standards.

Use concise titles and subtitles describing the purpose of the card.

If used with a call to action, include a few lines to describe what event the action triggers.

Minimal width for card with two buttons equal to 1/3 of container width. col-4 col-*-4

Minimal width image inside of card should be no less then 1/2 of container width - 640px.