Expansion Panels
The expansion panel is a popular interaction that can display a breadth of information without creating additional pages. When used correctly, the expansion panel is a great tool to reduce cognitive load. Our expansion panel style is similar to most other interactions in this guide as it makes use of white space, and it has light but sharp borders and link blue for text labels.
Style
Expansion Panel Types
Variations can be combined, such as using a chevron control or an expansion panel with an image. In development, the first expansion panel requires the top strokes and all subsequent expansion panels only require the bottom stroke.
Basic
- Text
- font-face: Roboto Bold
- font-weight: 700
- font-size: 24px
- line-height: 40px
- Icon
- font-face: FontAwesomePro-Light
- font-size: 20px
- line-height: 40px
- Closed Expansion Panel Icon: plus
- Open Expansion Panel Icon: minus
- Stroke
- border: 1px solid
- border-color: Gray F
First Section
- Stroke
- border: 1px solid
- border-color: Gray F
Chevron
- Icon
- font-face: FontAwesomePro-Light
- font-size: 20px
- line-height: 40px
- Closed Expansion Panel Icon: chevron-down
- Open Expansion Panel Icon: chevron-up
With Description
- Section Title Text
- font-face: Roboto-Bold
- font-weight: 700
- font-size: 24px
- line-height: 40px
- Description Text
- font-face: Roboto-Regular
- font-weight: 400
- font-size: 12px
- line-height: 14px
With Image
- Headline Text
- font-face: Roboto-Bold
- font-weight: 700
- font-size: 24px
- line-height: 40px
- Description Text
- font-face: Roboto-Regular
- font-weight: 400
- font-size: 12px
- line-height: 14px
Additional States
Hover
- text-color: Teal Hover
- icon color: Teal Hover
Active
- Headline Text
- font-face: Roboto-Bold
- font-weight: 700
- font-size: 24px
- line-height: 40px
- text-color: Teal Active
- icon color: Teal Active
- Description Text
- font-face: Roboto-Light
- font-weight: 300
- font-size: 18px
- line-height: 28px
Style Variations
Light Expansion Panel
- Closed State
- font-face: Roboto-Light
- font-weight: 300
- font-size: 24px
- line-height: 23px
- Headline Text: Open State
- font-face: Roboto-Bold
- font-weight: 700
- font-size: 24px
- line-height: 32px
Small Expansion Panel
- Section Title Text
- font-face: Roboto-Bold
- font-weight: 700
- font-size: 20px
- line-height: 28px
Behavior
Expansion panels can open only one at a time, or multiple simultaneously. Ensure that the correct icon is used for both the expanded and collapsed states.
Single Open
Only one section can be open at a time. If a closed section is opened, the existing open section closes automatically. When a new section is opened, scroll to dock the open section at the top of the screen.
Multiple Open
Multiple sections may be open at once. When a new section is opened, scroll to dock the open section at the top of the screen.