Skip to main content
Version: Previous

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.

Set-up

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

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

Usage

<alpha-accordion>
<alpha-accordion-item expanded>
<span slot="heading">Panel one</span>
Panel one content
</alpha-accordion-item>
<alpha-accordion-item>
<span slot="heading">Panel two</span>
Panel two content
</alpha-accordion-item>
<alpha-accordion-item>
<span slot="heading">Panel three</span>
Panel three content
</alpha-accordion-item>
</alpha-accordion>

Use cases

  • Presenting multiple sections of content

Additional resources