River

Experimental
Render text and image pairs
import {River} from '@primer/react-brand'

Examples

Default

Image to text ratio

Video

Component props

River Required

NameTypeDefaultDescription
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.
classNamestringSets a custom class on the root element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

River.Visual Required

NameTypeDefaultDescription
fillMediabooleantrueAutomatically styles images and video to fill and fit the width of the parent. Disable this setting if you have bespoke styling requirements.
childrenReactElementBring your own component (BYOC) img or ReactElement (E.g. Next.js Image component)
hasShadowbooleantrueShadow automatically applied to the children. Set be false when the child node has a transparent background.
classNamestringSets a custom class on the root element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node

River.Content Required

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

NameTypeDefaultDescription
childrenText,Heading, LinkContent that corrosponds to the adjacent visual.
classNamestringSets a custom class on the root element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node