Collapse
#
OverviewThe collapse component allows users to expand or collapse sections of content.
#
Design Guidelines#
Use when- For information that is lower priority or that users don’t need to see all the time.
#
Don't Use When- To hide error messages or other critical information that requires an immediate action.
#
Visual Style- Follow spacing guidelines for content within.
- Affordance icon (chevron) should always be left of the label.
- Affordance icon should reflect expand (
v
) and collapse (>
) status.
#
Placement- Can be placed within modals or cards.
#
Behaviour- Collapse default state is always closed (collapsed).
- Clicking on the collapse component header expands to reveal content and collapses to hide content.
- Any number of panels can be expanded at a time.
#
Editorial#
Titles- Use titles that set clear expectations about the type of content grouped upon expand.
- Do not use punctuation for titles.
- Write in sentence case (capitalize the first word and proper nouns only).
#
Content- Prioritize content so the user knows what to do first.
- Be clear if an action is required.
- Write in sentence case (capitalize the first word and proper nouns only).
#
Data Entry Actions- Limit the number of actions.
- Prioritize actions so user knows what to do first.
- Should be clear and predictable.
- See Actionable Words for additional guidance.
#
Collapse Examples#
CollapseUse when additional content is potentially needed but does not need to be seen all the time.