BrandUI River - PrimerBlazor

Basic River Layout

50/50 Section

By default, River applies a 50/50 image to text split.

Call to action

60/40 with Video

Tackle complex issues with task lists and track their status.

Breakout Headline

This first sentence is a river breakout headline. And this is where the body copy starts.

Call to action

Label

Centered Section with Label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Call to action

<PrimerBrandRiver Items="RiverSections" />

PrimerBrandRiver Item Options

Available options for each River section

Name	Description	Default Value	CSS Class
Label	Optional label shown above heading	null	River__label
Heading	Main title of the section	null	River__heading
Body	Main content paragraph	null	River__body-text
ActionLabel	Label for call-to-action link	null	River__call-to-action
ActionHref	Href for call-to-action link	#	-
ImageSrc	Image URL shown in visual area	null	River__visual
ImageAlt	Alt text for image	""	-
IsVideo	Switch between video and image	false	River__visual--video
Poster	Video preview image	null	River__video-poster
VideoSrc	Video source file path	null	River__video-src
VideoType	Video MIME type	null	River__video-type
Ratio	Layout ratio (e.g. 50/50, 60/40)	R50_50	River--r50-50 / River--r60-40
Align	Alignment (start, center)	Start	River--align-start / center
Breakout	Enable breakout style for heading	false	River--breakout
TrailingTimeline	Optional trailing bullet items	null	River__timeline

private List<RiverItem> RiverSections = new()
{
    new()
    {
        Heading = "50/50 Section",
        Body = "By default, River applies a 50/50 image to text split.",
        ImageSrc = "/images/placeholder.png",
        ActionLabel = "Call to action",
        ActionHref = "#",
        Align = RiverAlign.Start,
        Ratio = RiverRatio.R50_50
    },
    new()
    {
        Heading = "60/40 with Video",
        Body = "Tackle complex issues with task lists and track their status.",
        IsVideo = true,
        Poster = "/images/placeholder.png",
        VideoSrc = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        VideoType = "video/mp4; codecs=avc1.4D401E,mp4a.40.2",
        Align = RiverAlign.Start,
        Ratio = RiverRatio.R60_40
    },
    new()
    {
        Heading = "Breakout Headline",
        Body = "This first sentence is a river breakout headline. And this is where the body copy starts.",
        ImageSrc = "/images/placeholder.png",
        ActionLabel = "Call to action",
        ActionHref = "#",
        Ratio = RiverRatio.R50_50,
        Align = RiverAlign.Start,
        Breakout = true,
        TrailingTimeline = new()
        {
            "GitHub Codespaces offers a complete dev environment in seconds.",
            "GitHub Copilot is your AI pair programmer that empowers you to complete tasks."
        }
    },
    new()
    {
        Heading = "Centered Section with Label",
        Label = "Label",
        Body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        ImageSrc = "https://primer.style/brand/assets/placeholder.png",
        ActionLabel = "Call to action",
        ActionHref = "#",
        Align = RiverAlign.Center,
        Ratio = RiverRatio.R50_50
    }
};