Accordion

v1.1

An accordion is a tool used to hide and reveal content as part of progressive disclosure. Tapping the icon button on each accordion row will expand or collapse the content.

Stylized artwork of an accordion.

Considerations

Progressive

Accordions reduce visual complexity and information density.

Empower

Users decide what information they want to see and when.

On-demand

Revealing and hiding information is a single tap away.

Anatomy

Properties

Behavior

Screen sizes

Best practices

Sub sections

Specs

Accordions are shown with specs highlighted. A closed accordion row with a small title is 48px in height. A closed accordion row with a large title is 52px in height. The padding on the top and bottom of the title is 12px, the padding before and after the row is 12px.
An expanded accordion row adds padding between the title and content of 12px. Padding below the content is 6px.