Expand view
Overview
Definition
An interactive element to show or hide a piece of additional information.
Similar or related Components
Guidelines
If you have a single piece of relevant, but not super important information, you can put it within the Expand view. There is no limit to the amount of information you can add, just make sure it’s relevant to the main page or container that it’s in.
Use when there is a need to hide extra information. For example, the full transcript and description of a video or the full view of some terms or disclaimers.
Content
- Keep the button copy short.
- Try not to use vague phrases like “read more”.
- The default and open state of the button can say different things.
- Don’t hide essential information in the expanded view.
Visuals
Do
The hidden container can be styled to make readability easier. This can be with subheadings, different background colors, scroll windows, etc.
Do
You can put it in cards or containers.
Caution
Try not to change the button style, but Secondary can be used if more emphasis is needed. You should not need to use a Primary button for Expand view.
Caution
Don’t use more than one when they are right next to or stacked by each other. An accordion may be a better choice.
Don’t
Don’t put an Expand view in other Expand containers or an Accordion.
Specs
For the button: it’s a medium Tertiary. See Buttons for specifics.
For the container of the hidden content: it’s unstyled by default. You can choose how you want the information to be styled.
Accessibility
- The button should be controllable with keyboard and other assistive technology.
- The information within the hidden view should have the correct contrast.