Accordion
An accordion is a container that contains a header and a body that is revealed/hidden when toggled. When more than one accordion is used, it stacks vertically with no spacing.
Anatomy
Legend
- Border
- Accordion heading
- Accordion body
- Chevron Icon
Options
Default Open
The accordion can be opened by default.
Behavior
Opening
The accordion can only have one item open at a time.
Keyboard Interactions
The accordion can be tabbed through and use return/enter to open or close the accordion.
Usage Guidelines
Avoid splitting content
The header of the accordion should be a complete sentence or statement. It should never continue inside of the body of the accordion.
Container width vs headline width
When possible, the container of the headline should be bigger to avoid it getting too close to the chevron. This can be avoided with enough container space or concise headlines.
Specs
Size
The accordion will take up the width of the container and the height of the content with the header.
Spacing
The accordion has no left or right spacing but has fixed spacing between header, and the body. The body also has a 16px bottom padding.
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)