Collapse
A collapse lets users show or hide extra content without leaving the page.
Published: Last updated:
Collapse title
Suspendisse potenti. Vivamus non arcu tincidunt, congue massa at, porttitor velit.
Overview
The Collapse lets users show and hide additional content within the same page. It consists of a trigger (with a label) that expands or collapses a content region. Collapse helps keep pages scannable by hiding details until they’re needed.
When to use
- Extra information supports the main content but is not needed for everyone.
- You want to reduce visual clutter and keep pages easy to scan.
- Users may want to reveal multiple sections independently (for example, help text).
- Space is limited and showing everything at once would overwhelm the layout.
When not to use
- The hidden content is essential to completing a task.
- Users need to compare content across sections at the same time.
- Content must be discoverable without interaction (for example, key instructions or warnings).
Trigger
The trigger label should be short and descriptive, clearly indicating what content will be revealed when activated.
Title
The title provides additional context for the collapsed content and should summarise the information shown when expanded.
Content
Collapsed content can include text, links, or other components. Keep content focused and concise to avoid overwhelming the user when revealed.
Context bar
The context bar supports a range of components and supplementary content, including lists, tags, links, and CTA buttons, which can be shown alongside or in place of the default text block. This allows the collapse to display most kinds of content in a way that can be revealed by the user.
