@nimbus-ds/accordion

The Accordion component allows us to compress content into containers that can be opened or closed.

Installation

$ yarn add @nimbus-ds/accordion
# or
$ npm install @nimbus-ds/accordion

Component Anatomy

The component consists of a header and a container that can receive text or other components.

Guidelines

We use Accordion to show large amounts of content in a small space through progressive spreading. The header can carry a title for each block of content allowing the user to open the content that most interests him.

Behavior

Whenever accordions are used in a group, when one is opened the other closes automatically.

Recommendation for use

• Organize screens with lots of content
• Optimize space in contexts with a lot of information
• Group information of similar structure

Related components

• Text - Can be used when we need to show a text that should not be hidden under any circumstances, or in conditions where the content is essential for a given context.

Usage

View docs here.