BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Dividers

Variations

There are 2 variations of dividers.

1. Primary divider

Dividers variation row

The primary divider is used to separate rows of text. Primary dividers are 1px thick and are MetLife Gray (#D9D9D6).

2. Gradient divider

Dividers variation card

The gradient divider (horizontal) is used sparingly, to separate larger sections of content.

Usage

Dividers are used for visual clarity, when using rows of text. They can be used between header and data rows, or between multiple rows of data. Dividers are the width of the content they are relating to. Primary dividers appear as part of a larger component, like a card or data row, and do not appear individually or between blocks of content. Gradient dividers should be used sparingly to separate larger sections of content. They should not be used within header and data rows in a table, unless the table is within a card. In a card, the gradient divider should not be used more than once.

Dividers usage first example

The primary divider separating rows on and off of a card.

Dividers usage second example

Gradient divider used within a card.

Dividers usage first example

Gradient divider separating larger sections of content.