Number Card

Number Cards display a simple count of a specified object in the system, usually for monitoring purposes. Number Cards are most commonly used on dashboards to track high-level counts of an important metric (e.g. number of views on a movie trailer), but the queries can also be more complex, such as sourcing the number of views on all movie trailer videos for a particular year or in a given region.

The Number Card is much simpler than the Summary and Action Cards because it does not provide information about specific data about objects in the system or allow users to take any actions. It also does not allow the designer to include static text beyond a short description of the quantity that the card represents.

The Number Card is most useful for providing a quick count of a specific set of items, with little contextual information beyond that.

Anatomy

1. Number

2. Card title

3. Icon

Best practices

• While the larger section in which a card is located can add context to that card's content, ensure that cards stand alone and do not rely on other components for understanding or relevance.
• Icons on cards should be simple and have a clear relation to the content of the card. When in doubt, don't include an icon.
• Configure Number Cards as small or medium components on the grid. Avoid configuring a card in a single column, as this can create accessibility issues. Instead, stack Number Cards in two rows on the grid.

• The largest card in a group determines the height of the row the cards are on.