An accordion is a vertically stacked list of headers that reveal or hide associated content sections. The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title gives the user a high-level overview of the content, allowing the user to decide which sections to read.
Anatomy
- Header. Closed state: typography-paragraph-regular and color-brand-400.
- Header. Expanded state: typography-heading-6 and color-brand-400.
- Body. Using typography-paragraph-regular and color-brand-400.
Component Health
Healthy
Show details