HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Card
Last Updated on Sep 29, 2022
Cards are containers for content. They're often used to show a collection of related but different types of information.
View Figma ComponentView MAF StorybookView Web Components Storybook

Component Variants

Card Title

Design Principles

  • Cards are used to more aesthetically present data compared to flat table row. They can also provide an entry point to more detailed information.
  • Depending on the design of the screen, you can wrap a table in a card. This is often used to combine a filter bar and a table to clearly show they are related. Wrapping tables in cards is optional. It’s up to the designer’s discretion. When tables are wrapped in cards, they should always be bordered.
  • In some cases, cards can have a hover and selected state to allow users to select data. This is not the default usage of a card.

Do's and Don'ts

Use a Card when you have different kinds of related content representing one data object.
Place icons, context switchers, and other UI in the top right of cards. Don’t use more than three icons in the card header. If more than thre are needed, use a menu icon to open less used options.
Don’t group sets of unrelated information in a card.
Don’t wrap a table in a card unless there is a filter bar or other necessary UI inside the card.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Data Visualization
List
Table
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.