River accordion - Brand UI

Ready to use


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

Examples

Default

<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="/brand/assets/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="/brand/assets/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="/brand/assets/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.

<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="/brand/assets/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="/brand/assets/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="/brand/assets/placeholder-3.png" alt="Visual content for item 3" />
    </RiverAccordion.Visual>
  </RiverAccordion.Item>
</RiverAccordion>

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

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.