import {River, RiverBreakout} from '@primer/react-brand'Examples
Default
Loading
Image to text ratio
Loading
Video
Loading
Alternative heading levels
Loading
Duotone
Loading
River breakout
Loading
Component props
River Required
| 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 |
River.Visual and RiverBreakout.Visual Required
| 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 | false | Shadow 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 | |
rounded | boolean | true | Toggle visually rounded corners. Enabled by default. |
River.Content and RiverBreakout.Content Required
Label, 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 | 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 |
RiverBreakout
| Name | Type | Default | Description |
|---|---|---|---|
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 |
RiverBreakout.A11yHeading Required
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The heading text that will be read aloud to screen readers, but is visually hidden. |