The card group enables for one or multiple related data cards to be collapsed for space or expanded to display more information with a single click or tap.

Card groups are aware of user selections. If a data card has been changed to its collapsed or expanded view state, those cards will display that way when the card group is expanded. Because these preferences could quickly complicate the interface, be intentional when determining whether or not a card group should be collapsed by default.

In some occasions, there may be quite a few data cards collected within a card group. In these situations, when the card group is expanded, an optional more/less button can be used to show or hide additional data cards, including any that may be empty.

The card group is made up of many fixed parts that enable flexibility across sports, interfaces and platforms. Card groups can be viewed in the collapsed and expanded states.

In the collapsed state, the card group will always display the title and count of the total number of child data cards within it.

When in the expanded state, the card group displays some or all child data cards within it, in their pre-determined state. Empty cards will always be hidden behind the more/less button.

The card group is made up of many fixed parts that enable flexibility across sports, interfaces, and platforms.

The card group is meant for use only inside of themed parent modules. Use them individually or as a collection of data.

Don'tuse card groups to collect cards in isolated layouts.

Docreate content rich experiences within modules.

Organize information with card groups as they are relevant. Be decisive when content within a single card group may be better suited for two or more.

Don'tnest card groups within card groups.

Docreate new card groups when the collected content becomes too broad.

The card group titles should be as succinct as possible while remaining explanatory of all data cards included. Ideally these titles should be common or significant to the sport.

Don'tbe overly verbose when describing a collection of data cards.

Dodescribe grouped data cards intentionally using common language.

Data Card

Data Visualizations

Module System

Accessibility

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

The card group is available for React and React Native.