Skip to main content
Version: 2023.1

Web Components - Accordion

An accordion is a vertically stacked set of interactive headings representing a section of content. The headings function as controls that enable users to reveal or hide their associated sections of content. Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.


import { provideDesignSystem, alphaAccordion, alphaAccordionItem } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaAccordion(), alphaAccordionItem());


Live Editor

Use cases

  • Presenting multiple sections of content

Additional resources