Store longer content in sections users can open one at a time.
Keep the section titles short.
Import
import { Accordion } from '@contentful/f36-components';
import { Accordion } from '@contentful/f36-accordion';
Examples
The accordion has two variations that define the alignment of the chevron icon: left or right.
Basic usage
Using it with other components
Other typographic components can be passed as the accordion's title and anything can be used as the accordion's content. For example:
Controlled Accordion
By default, the AccordionItem is uncontrolled (manage it's expanded state by itself)
But you can make it controlled by providing boolean value to isExpanded
for Accordion.Item component
Props (API reference)
Accordion
Accordion.Item
Content guidelines
- The title should be a short message that summarize the content of the accordion.
- Anything can be passed as the content of the accordion, but often organizing it with Texts and Tables would be enough.
- When using headings, be mindful about the heading levels. The header is a Subheading with
h2
tag.
Accessibility
- It allows keyboard navigation to open and close the accordions