Design System / Application UI / Data Display

Data Display

Stats cards, description lists, and calendar views.

Data ยท 16 variants

How To Use This Page

Data Display sits inside the Application UI part of the catalog and collects reusable examples that solve the same job in different ways.

This page currently groups 9 examples so you can compare structure, emphasis, and density before choosing an implementation direction.

How The Content Is Grouped

  • The examples are grouped as a single Application UI reference page so you can compare variations without leaving the route.
  • Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.

Start With

Simple

Standalone metrics with directional change.

With brand icon

Adds branded icon treatments for scanability.

With shared borders

Connected cards with a single outer container.

Left aligned

A simple two-column definition layout.

Left aligned in card

Adds a card shell and strong row dividers.

Two column in card

A denser detail card with paired fields.

Left aligned striped

Alternating row fills for easier scanning.

Month view

January 2022 with event markers and a linked agenda.

Stats

Simple

Standalone metrics with directional change.

Total Subscribers
71,897+12%
Avg. Open Rate
58.16%+5.4%
Avg. Click Rate
24.57%-3.2%

With brand icon

Adds branded icon treatments for scanability.

Total Subscribers
71,897+12%
Avg. Open Rate
58.16%+5.4%
Avg. Click Rate
24.57%-3.2%

With shared borders

Connected cards with a single outer container.

Total Subscribers
71,897+12%
Avg. Open Rate
58.16%+5.4%
Avg. Click Rate
24.57%-3.2%

Description Lists

Left aligned

A simple two-column definition layout.

Full name
Margaret Thropp
Email
margaret@example.com
Title
Backend Developer
Department
Engineering
Location
New York, NY

Left aligned in card

Adds a card shell and strong row dividers.

Applicant Information

MT
Full name
Margaret Thropp
Email
margaret@example.com
Title
Backend Developer
Department
Engineering
Bio
Experienced backend developer with 8 years in distributed systems and cloud infrastructure.

Two column in card

A denser detail card with paired fields.

Employee Details

Full name
Margaret Thropp
Department
Engineering
Email
margaret@example.com
Location
New York, NY
Title
Backend Developer
Salary
$120,000

Left aligned striped

Alternating row fills for easier scanning.

Full name
Margaret Thropp
Email
margaret@example.com
Title
Backend Developer
Department
Engineering
Location
New York, NY

Calendars

Month view

January 2022 with event markers and a linked agenda.

January 2022

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Events in January

13

Team sync

January 13

10am

18

Design review

January 18

2pm

25

Sprint planning

January 25

9am

Small with meetings

Compact calendar alongside today's schedule.

January 2022

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Today's Meetings

Team sync

10am

Design review

2pm

Sprint planning

9am