@primer/react-brand/docs/components/RiverAccordion/index.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: River accordion
description: Use the river accordion to create expandable content panels with associated visuals.
keywords: ['expandable', 'features', 'panels', 'visual']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/river/RiverAccordion/RiverAccordion.tsx
figma: 'https://www.figma.com/design/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=16649-1564&t=hUxfzn1hD1LwE1aQ-4'
storybook: '/brand/storybook/?path=/story/components-riveraccordion--default'
---

```js
import {RiverAccordion} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<RiverAccordion>
  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 1</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-1.png" alt="Visual content for item 2" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 2</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-2.png" alt="Visual content for item 2" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 3</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-3.png" alt="Visual content for item 3" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>
</RiverAccordion>
```

### 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.

```jsx
<RiverAccordion align="end">
  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 1</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-1.png" alt="Visual content for item 1" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 2</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-2.png" alt="Visual content for item 2" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 3</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
        felis nam pulvinar risus elementum.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-3.png" alt="Visual content for item 3" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>
</RiverAccordion>
```

### 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`.

```jsx
<RiverAccordion variant="gridline">
  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 1</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>
        The gridline variant creates a full-bleed visual background, centering the media with padding around it.
      </Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-1.png" alt="Visual content for item 1" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 2</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>The background treatment is applied to each visual while the accordion interaction stays the same.</Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-2.png" alt="Visual content for item 2" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>

  <RiverAccordion.Item>
    <RiverAccordion.Heading>Heading 3</RiverAccordion.Heading>
    <RiverAccordion.Content>
      <Text>Use this treatment when visuals should sit in an edge-to-edge background panel.</Text>
      <Link href="#">Call to action</Link>
    </RiverAccordion.Content>
    <RiverAccordion.Visual>
      <img src="/images/placeholder-3.png" alt="Visual content for item 3" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>
</RiverAccordion>
```

## Component props

### RiverAccordion `Required`

| Name       | Type                      |   Default   | Description                                                            |
| :--------- | :------------------------ | :---------: | :--------------------------------------------------------------------- |
| `children` |                           |             | 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`](../../typography/Heading/index.md) 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.