Accordion

Description

data-region: cb__accordion

The Accordion component allows users to hide or reveal content. This is useful for reducing cognitive load for large sections of content.

  • Alignment Options: center, wide, full
  • Color Themes: none
  • Visible Content Fields: title, “view more” link, accordion items
  • Instances per Page: none to multiple

How it Works

  • Accordion contents are hidden by default
  • Clicking on an accordion item will reveal its contents
  • Clicking on an accordion item while open will hide its contents

Examples

Basic Accordion

Explore in Storybook

Accordion with Subtitles and Button

Explore in Storybook

Accordion with Disabled State

Explore in Storybook