import {RiverAccordion} from '@primer/react-brand'Examples
Default
Visual alignment
Use the align prop to control the position of the visuals. Setting align="end" will invert the default position of the visuals and content.
Gridline variant
Use the gridline variant to add horizontal border lines, equal-width columns, and an edge-to-edge visual background. The visual background defaults to var(--brand-color-canvas-subtle) and can be customized with a color, gradient, or image by overriding --brand-RiverAccordion-visual-background.
Component props
RiverAccordion Required
| 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 |
variant | 'default''gridline' | 'default' | Controls the visual style of the accordion |
RiverAccordion extends the HTML div element and supports all div props.
RiverAccordion.Item Required
| Name | Type | Default | Description |
|---|---|---|---|
children | 'RiverAccordion.Heading''RiverAccordion.Content''RiverAccordion.Visual' | Must include all three listed components |
RiverAccordion.Item extends the HTML div element and supports all div props.
RiverAccordion.Heading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | string | Heading text |
RiverAccordion.Heading extends the Heading component and supports all Heading props.
RiverAccordion.Content Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement[] | Content components |
RiverAccordion.Content extends the HTML div element and supports all div props.
RiverAccordion.Visual Required
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactElement | Visual content (e.g., image) |
RiverAccordion.Visual extends the HTML div element and supports all div props.