Skip to content 
Body text lorem ipsum dolor sit amet Body text lorem ipsum dolor sit amet
Accordion
Accordions are interactive lists of headings that reveal additional content through progressive disclosure. They allow to organize larger amounts of information in an effective way, by removing excessive scrolling for users scanning content. However, no vital information should be buried within a collapsed section. This makes the high-level labeling of each item imperative to the component's success in allowing users to browse and discover meaningful information.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
| CSS Variable | Type | Description |
|---|---|---|
--z-accordion--border-color | color | |
--z-accordion--color | color | |
--z-accordion--radius | distance | |
--z-accordion--summary-color | color | |
--z-accordion--summary-padding | distance | |
--z-accordion--summary-margin | distance | |
--z-accordion--summary-font | font | |
--z-accordion--width | distance | |
--z-accordion--outline | distance |
Accessibility
...