BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Tabs

Variations

There is one variation of tabs.

1. Tabs

Alerts and notifications variations system alert

Tabs allow a user to navigate between different groups of content within the same page.

States

Default

Alerts and notifications state unread expanded card

Default tab, unselected. Text is black (#000000) and underline is MetLife Gray (#D9D9D6).

Selected

Alerts and notifications state read expanded alert

Upon selection, a secondary underline highlights which tab is selected. This underline is MetLife Blue 2 (#007ABC).

Scrolled

Alerts and notifications state unread expanded card

When there are more than two options, tabs are scrollable. The tabs on the edge should always be partially onscreen, so that a user knows there are further options.

Focused

Alerts and notifications state unread expanded card

Usage

Tabs are used to navigate between related groups of content on the same level of hierarchy, without navigating to another page. Tabs are best for related groups of content, visually complex content like charts, or when content is too much for an accordion.

Find a provider list

Alerts and notifications usage notification card

Tabs navigate between two groups of related content. In the cost estimator, it allows a user to quickly and clearly compare projected pricing.