Collapse
Collapse is a UI pattern for hiding and revealing content to reduce visual clutter while preserving access to
secondary settings.
Purposes
- Space optimization — hide non-relevant UI on smaller views
- Content organization — group related info, collapse unused sections
- Focus and clarity — reduce clutter and cognitive load
- Progressive disclosure — reveal complexity on demand
Structure
| Element |
Description |
| Container |
Wraps trigger and expandable panel |
| Trigger |
Clickable summary with chevron arrow — points right when collapsed, down when expanded |
| Panel |
Hidden or revealed content area below the trigger |
Examples
Click the headers to toggle. The chevron rotates to indicate open or closed state.
Light mode
Expanded
Collapsed
Stacked sections
Capture settings
Output format
Dark mode
Expanded
Collapsed
Stacked sections
Capture settings
Output format
Guidelines
- Chevron sits to the left of the trigger label; rotates 90° when expanded.
- Trigger text uses sentence case and bold weight.
- Use smooth height transitions (~300ms ease-in-out) when animating expand/collapse in production UI.
- Honor
prefers-reduced-motion for transition duration.