BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0



There is 1 variation of accordion.

Accordion variation

Accordions are used to compress simple, contextual information. Tap to reveal information.



Accordion state default

Accordion in a collapsed state. Text is MetLife Blue 2 (#007ABC). Underline is MetLife Darkest Gray (#333333).


Accordion state focused

On focus state field border becomes 3px in MetLife Blue 2 (#007ABC).


Accordion state expanded

Plus symbol changes to minus symbol. Expanded content background should be MetLife Light Gray (#F2F2F2). When accordion is open, change color of border line to MetLife Blue 2 (#007ABC).


Accordions are used to compress simple information that doesn't include complex interactions. The plus symbol indicates the ability to expand/collapse extra information.

Accordion usage default
Accordion usage expanded


Accordions animate open or close upon a user tapping anywhere on title row/closed state of the component.

The content slides down from behind the closed state, as the vertical line of the + icon rotates to become a - minus icon. Upon close, both elements reverse to hide the accordion content.