BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon
MetLife Design System 2.0

Accordion

Variations

There is 1 variation of accordion.

Accordion variation

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

States

Default

Accordion state default

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

Focused

Accordion state focused

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

Expanded

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).

Usage

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

Animation

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.