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.


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.