River accordion
Use the river accordion to create expandable content panels with associated visuals.
import {RiverAccordion} from '@primer/react-brand'
Use the align prop to control the position of the visuals. Setting align="end" will invert the default position of the visuals and content.
| Name | Type | Default | Description |
|---|---|---|---|
children | RiverAccordion.Item[] | Multiple RiverAccordion.Item components | |
align | 'start''end' | 'start' | Controls the position of the visuals relative to the accordion content |
RiverAccordion extends the HTML div element and supports all div props.
| Name | Type | Default | Description |
|---|---|---|---|
children | RiverAccordion.HeadingRiverAccordion.ContentRiverAccordion.Visual | Must include all three listed components |
RiverAccordion.Item extends the HTML div element and supports all div props.
| Name | Type | Default | Description |
|---|---|---|---|
children | string | Heading text |
RiverAccordion.Heading extends the Heading component and supports all Heading props.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement[] | Content components |
RiverAccordion.Content extends the HTML div element and supports all div props.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement | Visual content (e.g., image) |
RiverAccordion.Visual extends the HTML div element and supports all div props.