Card

When a page contains a lot of content, it may take more time for users to sift through it. Inability to quickly locate the content that they need, may discourage some users and abandon the page.

Cards combine visual and textual elements to introduce, sort and group topics that are related to page content. They can also provide very clear navigation support for users by highlighting key connections to other pages. Because they are responsive, they offer a consistent experience on both mobile and desktop screens.


Component data

Component resources:
SCSS files

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a card supports.


Code


				
			

Responsive preview

Usage best practices

Cards are used across different components such as card setcard slider and card set menu.

Consider using cards to:

  • display images/videos with text
  • highlight specific/grouped information on a page
  • link to related content or pages

Usage examples:

  • displaying significant amounts of data at a glance
  • displaying high level article information and linking to corresponding article pages
Card variations and features
Variation name Unique features
Mini card
  • horizontal layout with an image asset on the left
  • only contains an image and title options
  • meant to be used as a click through to a content page
  • smaller footprint
Regular card
  • vertical layout with the visual asset at the top
  • allows for more content such as description (optional)
  • allows for a variety of visual assets such as images, icons, illustrations or videos (all optional)
  • can contain all the information or be used as a click through to a content page
  • flexible usage

Do

Make sure that the image ratio of the image and the selected image ratio one the card match.

Ensure that the card titles are descriptive and easy to understand.

Use only one link or call to action per card.

Apply 100 character limit to the mini card title to reduce visual clutter and avoid text overruns.