Accordion

Accordions allow users to show and hide sections on a page.

When to use

Display grouping

Use accordions to group together content in a single area

Display grouping

Use accordions to group together content in a single area

Display grouping

Use accordions to group together content in a single area

Segment content

Guide users by separating content into different sections allowing them to move one at a time

Segment content

Guide users by separating content into different sections allowing them to move one at a time

Segment content

Guide users by separating content into different sections allowing them to move one at a time

Maximize space

Use accordions to save space and only show what’s necessary to the user in the moment

Maximize space

Use accordions to save space and only show what’s necessary to the user in the moment

Maximize space

Use accordions to save space and only show what’s necessary to the user in the moment

When to avoid

User access

Avoid using accordions when users to need to access the content inside frequently

User access

Avoid using accordions when users to need to access the content inside frequently

User access

Avoid using accordions when users to need to access the content inside frequently

Little content

When there’s little content on the page, avoid using accordions so the page doesn’t feel too empty

Little content

When there’s little content on the page, avoid using accordions so the page doesn’t feel too empty

Little content

When there’s little content on the page, avoid using accordions so the page doesn’t feel too empty

Complex content

If the content within an accordion is too complex or has too many levels, avoid using an accordion as space can be limited

Complex content

If the content within an accordion is too complex or has too many levels, avoid using an accordion as space can be limited

Complex content

If the content within an accordion is too complex or has too many levels, avoid using an accordion as space can be limited

Specifications

States

Collapsed

Expanded

Collapsed

Expanded

Collapsed

Expanded

Collapsed

Expanded

Anatomy

Title

The title should give users a brief understanding of what the accordion contains.

Slot

The slot allows designers to swap in unique content for the accordion such as text, images, form fields and more.

Icon

The chevron will indicate whether the accordion is open or closed.

Divider

The divider can be hidden if accordion is the last child in a list or accordion group.

Value

Accordion

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing

A proud product of the Border UX team.

Privacy

Terms

Licensing