Accordion
Accordions are used to toggle the visibility of content.
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is the content
Dynamic Content Example
An accordion can change size based on the content inside of it. This is a dynamic example.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
- Default preferences:
- Large size
- End indicator position
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is a preview of the default Accordion component.
Small Size
The small version can be used in dense content areas like cards within a dashboard.
Responsive Layouts
The Accordion component is responsive and can be used in any layouts using the the default large size.
On this page
import { Accordion, AccordionItemGroup,} from '@cerberus/react'Usage
This is the content
Customization
You can utilize the primitive components to customize the accordion.
| Component | Description |
|---|---|
| Accordion | The main container for the accordion items. |
| AccordionItem | Represents a single item within the accordion. |
| AccordionItemTrigger | The trigger element that toggles the visibility of the content. |
| AccordionItemContent | The content that is shown or hidden when the trigger is activated. |
| AccordionItemIndicator | An optional indicator to show the state of the accordion item. |
The rugged, raw, and unapologetic Wu-Tang Clan is a hip-hop group that has been around since 1992. The group is known for its distinctive sound and lyrics that often touch on themes of urban life, crime, and the struggles of the inner city New York.
API
Accordion
The Accordion is an abstraction of the Root component.
AccordionItemGroup
export interface AccordionItemGroupBaseProps { children: ReactNode heading: string indicatorPosition?: 'start' | 'end' size: 'sm' | 'lg' value: string}export type AccordionItemGroupProps = AccordionItemGroupBaseProps & AccordionVariantProps| Name | Default | Description |
|---|---|---|
| children | The content of the accordion item. | |
| heading | The heading of the accordion item. | |
| value | The value of the accordion item. Must be unique. | |
| size | lg | The size of the accordion item. |
| indicatorPosition | end | The position of the indicator. |
On this page
Use Cases
- Users should be able to:
- Navigate to and activate links with assistive tech (i.e., focus)
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on (non-disabled) links |
| Space / Enter | Activates the (non-disabled) links |
On this page