River

Use the river component to render text and image pairs.

Experimental
Not reviewed for accessibility

<>
  <River>
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
  <River align="end">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
  <River align="center">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
</>

<>
  <River>
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
  <River align="end">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
  <River align="center">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>Heading</Heading>
      <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>
    </River.Content>
  </River>
</>

<>
  {/* 50/50 (default) example */}
  <River>
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>50/50</Heading>
      <Text>
        <strong>By default</strong>, River applies a 50/50 image to text split.
      </Text>
    </River.Content>
  </River>
  {/* 60/40 example */};
  <River imageTextRatio="60:40">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>60/40</Heading>
      <Text>This example applies an optional 60/40 image to text split.</Text>
    </River.Content>
  </River>
</>

<>
  {/* 50/50 (default) example */}
  <River>
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>50/50</Heading>
      <Text>
        <strong>By default</strong>, River applies a 50/50 image to text split.
      </Text>
    </River.Content>
  </River>
  {/* 60/40 example */};
  <River imageTextRatio="60:40">
    <River.Visual>
      <img
        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
        alt="placeholder, blank area with an off-white background color"
      />
    </River.Visual>
    <River.Content>
      <Heading>60/40</Heading>
      <Text>This example applies an optional 60/40 image to text split.</Text>
    </River.Content>
  </River>
</>

<River imageTextRatio="60:40">
  <River.Visual hasShadow={false}>
    <video
      loop
      playsInline
      autoPlay
      muted
      aria-hidden="true"
      poster="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress-placeholder.png"
    >
      <source
        type="video/mp4; codecs=hevc,mp4a.40.2"
        src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.hevc.mp4"
      />
      <source
        type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
        src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.h264.mp4"
      />
    </video>
  </River.Visual>
  <River.Content>
    <Heading>Break issues into actionable tasks</Heading>
    <Text>
      Tackle complex issues with task lists and track their status with new
      progress indicators. Convert tasks into their own issues and navigate your
      work hierarchy.
    </Text>
  </River.Content>
</River>

<River imageTextRatio="60:40">
  <River.Visual hasShadow={false}>
    <video
      loop
      playsInline
      autoPlay
      muted
      aria-hidden="true"
      poster="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress-placeholder.png"
    >
      <source
        type="video/mp4; codecs=hevc,mp4a.40.2"
        src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.hevc.mp4"
      />
      <source
        type="video/mp4; codecs=avc1.4D401E,mp4a.40.2"
        src="https://github.githubassets.com/images/modules/site/issues/issue-tasks-progress.h264.mp4"
      />
    </video>
  </River.Visual>
  <River.Content>
    <Heading>Break issues into actionable tasks</Heading>
    <Text>
      Tackle complex issues with task lists and track their status with new
      progress indicators. Convert tasks into their own issues and navigate your
      work hierarchy.
    </Text>
  </River.Content>
</River>

<River imageTextRatio="60:40">
  <River.Visual>
    <img
      src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
      alt="placeholder with an off-white background color"
    />
  </River.Visual>
  <River.Content>
    <Heading as="h1">Alternative heading levels</Heading>
    <Text>
      Use the 'as' prop to specify alternative heading levels. The default is
      'h3'.
    </Text>
  </River.Content>
</River>

<River imageTextRatio="60:40">
  <River.Visual>
    <img
      src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
      alt="placeholder with an off-white background color"
    />
  </River.Visual>
  <River.Content>
    <Heading as="h1">Alternative heading levels</Heading>
    <Text>
      Use the 'as' prop to specify alternative heading levels. The default is
      'h3'.
    </Text>
  </River.Content>
</River>

Component props

Name	Type	Default	Description
`align`	`'start'`, `'end'`, `'center'`	`'start'`	Alignment of text content relative to the Visual position
`imageTextRatio`	`'50:50'`, `'60:40'`	`'50:50'`	The aspect ratio applied to the image in relation to the adjacent text. Affects overall layout proportions.
`className`	`string`		Sets a custom class on the root element
`id`	`string`		Sets a custom id
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node

Name

Type

Default

Description

align

'start', 'end', 'center'

'start'

Alignment of text content relative to the Visual position

imageTextRatio

'50:50', '60:40'

'50:50'

The aspect ratio applied to the image in relation to the adjacent text. Affects overall layout proportions.

className

string

Sets a custom class on the root element

id

string

Sets a custom id

ref

React.RefObject

Forward a Ref to the underlying DOM node

Name	Type	Default	Description
`fillMedia`	`boolean`	true	Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.
`children`	`ReactElement`		Bring your own component (BYOC) `img` or `ReactElement` (E.g. Next.js `Image` component)
`hasShadow`	`boolean`	`true`	Shadow automatically applied to the `children`. Set be `false` when the child node has a transparent background.
`className`	`string`		Sets a custom class on the root element
`id`	`string`		Sets a custom id
`ref`	`React.RefObject`		Forward a Ref to the underlying DOM node

Name

Type

Default

Description

fillMedia

boolean

true

Automatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.

children

ReactElement

Bring your own component (BYOC) img or ReactElement (E.g. Next.js Image component)

hasShadow

boolean

true

Shadow automatically applied to the children. Set be false when the child node has a transparent background.

className

string

Sets a custom class on the root element

id

string

Sets a custom id

ref

React.RefObject

Forward a Ref to the underlying DOM node

Text,Heading, Link are the only children accepted. They can be composed in any order, but their rendered output will always be in a predetermined order.

Name	Type	Description
`children`	`Text`,`Heading`, `Link`	Content that corrosponds to the adjacent visual.
`className`	`string`	Sets a custom class on the root element
`id`	`string`	Sets a custom id
`ref`	`React.RefObject`	Forward a Ref to the underlying DOM node

Name

Type

Default

Description

children

Text,Heading, Link

Content that corrosponds to the adjacent visual.

className

string

Sets a custom class on the root element

id

string

Sets a custom id

ref

React.RefObject

Forward a Ref to the underlying DOM node

On this page

River

Examples

Default

Image to text ratio

Video

Alternative heading levels

Component props

River Required

River.Visual Required

River.Content Required