Accordions

Accordions are used for content that doesn’t need to all be viewed at once. Great for content that’s related or all at the same level that the user can view in any order.

Accordions can contain a variety of other content or components inside of them, including body copy, tables, and more.

Specs

• Accordions span the width of the container they are in

• Max-width of 960px

• Title and caret icon padding: 16px 8px (mobile) , 24px 16px (desktop)

• Body padding: 24px (mobile) , 24px 32px (desktop)

• Font size: body copy medium

• Border and horizontal rule: 1px solid [gray 10]

• Open state background color: white

• Closed state background color: gray 5

• Icon color: dark accent

Text scales up/down in the standard formula outlined in the Typography section.

Inspect content components in public site components in Figma