IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Data Card

/

Design

Related statistical data for a single subject within a card.

Use data cards to collect and present data visualizations that enable user filtering. Depending on the context, a data card may strictly represent a single statistic or a list of statistics within the same category.

View Modes

Data cards can be viewed in the collapsed, preview, expanded, and full view states of the module system.

Collapsed

This is the sleekest presentation of the data card and provides only the title of the data it contains and an optional mini-visualization.

Preview

This is the most common view of the data card. They are usually present as a collection within a card group. It shares the title as well as the most important pieces of data the card contains. Each visualization will automatically show what is most relevant. This includes any items that may be selected within the data.

Expanded

When in the expanded view mode, the data card will display all items included in the content area. It will fill the entire module to bring more focus to the data set.

Full

When in the full view mode, the data card will display all items included in the content area. It will fill the entire screen, and should only be used for processes that require complete focus. This view mode doesn't currently support data visualizations.

Accessibility

Keyboard Navigation

Tab navigation is fully supported by default. Users can press tab to navigate to data cards and within header or body visualizations, and enter to mimic pressing the header.

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconCritical ViolationsIconConfirmation Pass
  • IconCriticalComponent contains an interactive div or span with no associated role.
  • IconWarningaria-label attribute is not well supported on a div with no valid role attribute. (Storybook)
React NativeIconWarning WarningIconWarning WarningIconWarning N/A
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)
  • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)

Microcopy

Header Titles

The header title should be concise and easily describe the set of data it contains. In predetermined data cards, write them in title case, but don't worry about punctuation. Avoid using acronyms wherever possible. When the data set is titled by the user (such as an ungrouped stat name) display the text string as they've entered it.

Usage

Module System

Data cards are part of the module system and should only be used with card groups and data visualizations.

Don't use data cards outside of card groups.

Don'tuse data cards outside of card groups.

Do include a data visualization within the content area.

Doinclude a data visualization within the content area.

Don't nest data cards within data cards.

Don'tnest data cards within data cards.

Do group relevant data cards in a logical manner.

Dogroup relevant data cards in a logical manner.

Don't place mismatched visualizations within data cards.

Don'tplace mismatched visualizations within data cards.

Do use the appropriate data visualization to portray the data

Douse the appropriate data visualization to portray the data

Related

Module System

Card Group

Data Visualizations

Platform Support

The data card is available for React and React Native.