Basic: data-layout="center" data-padding="xl"

Fluid Framework

A modern, semantic CSS design system. Like water: adaptable, natural, powerful yet gentle.

data-size="full" data-theme="dark"

Make an Impact

Fullscreen heroes command attention. Use them sparingly for maximum effect.

data-theme="gradient"

Subtle color transitions create depth without distraction. A calm brook, not a crashing wave.

data-layout="split"

Split layouts pair text with visuals. Perfect for product showcases and feature sections.

data-layout="split-reverse"

Reverse the split for visual variety. HTML stays logical, CSS handles the visual order.

data-overlay="medium" (with background)

Use overlays to ensure text readability over images. Light, medium, heavy, or gradient options.

data-overlay="gradient" data-valign="end"

Content positioned at the bottom with a gradient fade. Great for cinematic presentations.

data-size="compact" data-theme="primary"

Perfect for interior page headers. Less vertical space, same impact.

data-layout="left"

Not everything needs to be centered. Left alignment feels natural for content-heavy heroes.

data-width="narrow"

Narrow content width creates focus. Every word counts.