BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Tables

Variations

There are 6 variations of header rows and 6 types of data rows.

1. Header row

Table header row

Most commonly used title, black (#000000). The row underline is MetLife Gray (#D9D9D6).

2. Header row with subhead

Table header row with subhead

When title needs further explanation. Header row is black (#000000) and subhead is MetLife Darkest Gray (#333333).

3. Actionable header row with icon

Table actionable header row with icon

An actionable row indicated by the MetLife Blue 2 (#007ABC) link color and icon. Tapping on this row leads to another screen.

4. Header row with link

Table header row with link

For important actions relevant to the overall group of content. Header row is black (#000000) and text link is MetLife Blue 2 (#007ABC). Tapping on this row activates text link.

5. Header row with 2 columns

Table header row with 2 columns

A header row that contains two columns. Columns may contain data, but function as a header. The header in both columns is black (#000000).

6. Actionable header row with subhead and icon

Table header row with 2 columns

An actionable header row with a larger subhead and an icon. The header and icon are MetLife Blue 2 (#007ABC) to indicate actionabillity. The subhead is MetLife Darkest Gray (#333333).

1. Data row with 2 columns

Table data row with 2 columns

Contains two columns of data, differentiated by regular and bold text. The first column of data is MetLife Darkest Gray (#333333), the second column is black (#000000).

2. Data row with subhead and 2 columns

Tabledata row with subhead and 2 columns

Contains a title, subhead, and a second column of data. All text in data row with subhead and 2 columns is MetLife Darkest Gray (#333333). Tapping the ‘i’ info icon launches a dialog box with supplementary information.

3. Data row with subhead, 2 columns, and status

Table data row with subhead, 2 columns, and status

Contains a title, subhead, link and a second column of data, as well as a status indicator. Data row with subhead is MetLife Darkest Gray (#333333). Links are MetLife Blue 2 (#007abc). Status bar (non-alert) background is MetLife Darkest Gray (#333333). Tapping the ‘i’ info icon launches a dialog box with supplementary information. There is also a tappable text link in the second column.

4. Data row with link

Table data row with subhead, 2 columns, and status

A data row that contains a link in the second column.

5. Data row with toggle

Table data row with subhead, 2 columns, and status

A data row that contains a toggle.

6. Data row with subhead and toggle

Table data row with subhead, 2 columns, and status

A data row that contains a subhead and toggle.

States

Styles used within tables should inherit their styles' rules. (For ex. normal link styles apply within a table.) Focus states are the same for all table rows.

Default data row

Table state data row default

Focused

Table state data row focused

On focus, a 3px border in MetLife Blue 2 (#007ABC) appears.

Default actionable header row

Table state actionable header row default

Focused

Table state actionable header row focused

Usage

A table is created from a combination of different rows and is used to display a set of data. Tables can also contain links within header and data rows. Use tables for data display and not for transactional forms.

Table usage example 1

Tables are only used on white backgrounds.

Table usage example 2
Table usage example 3