Hero

Page-opening blocks. Establishes hierarchy, communicates the core message, drives a primary action. Composes from brio's centering, switching, and clustering primitives.

Core: .center, .cluster, .switcher, .flow, .button, .badge

Centered with CTA

The workhorse. Centered text, one or two buttons. Works for landing pages, product pages, and documentation home pages.

Ship faster with less CSS

A small component library for people who'd rather write HTML than configure a build tool.

Get started Documentation

<style>
    .demo-hero-centered { padding-block: var(--space-xl); }
</style>
<docs-resize>
    <div class="center flow text-center demo-hero-centered" style="--center-max: 40rem">
        <h1 class="text-5 leading-heading">Ship faster with less CSS</h1>
        <p class="text-1 text-muted">
            A small component library for people who&#39;d rather write HTML than configure a build tool.
        </p>
        <div class="cluster is-center is-tight">
            <a class="button" href="#">Get started</a>
            <a class="button is-outlined" href="#">Documentation</a>
        </div>
    </div>
</docs-resize>

Split with image

Text on one side, image or illustration on the other. .switcher stacks the two children when the container is narrower than the threshold — no media queries.

New in v2

Design tokens that actually scale

Fluid type, space, and color — all driven by custom properties. No media query breakpoints.

Try it now View source

<style>
    .demo-hero-split {
        padding-block: var(--space-lg);
    }
    .demo-hero-split-frame {
        border-radius: var(--radius-md);
        overflow: hidden;
    }
</style>
<docs-resize>
    <div class="switcher demo-hero-split">
        <div class="flow">
            <span class="badge is-accent text--2">New in v2</span>
            <h1 class="text-4 leading-heading">Design tokens that actually scale</h1>
            <p class="text-1 text-muted">
                Fluid type, space, and color — all driven by custom properties. No media query breakpoints.
            </p>
            <div class="cluster is-tight">
                <a class="button" href="#">Try it now</a>
                <a class="button is-ghost" href="#">View source</a>
            </div>
        </div>
        <div class="frame demo-hero-split-frame" style="--frame-ratio: 4 / 3">
            <img src="https://picsum.photos/seed/brio-hero-split/800/600" alt=""/>
        </div>
    </div>
</docs-resize>

Background accent

Subtle surface to separate the hero from page content. Good for landing pages and product marketing where the hero needs visual weight without a full image.

Monitor everything. Fix anything.

Real-time observability for your infrastructure. Alerts, dashboards, and traces in one place.

Start free trial

No credit card required.

<style>
    .demo-hero-accent {
        background-color: var(--color-surface-sunken);
        border-radius: var(--radius-md);
        padding: var(--space-xl) var(--space-md);
    }
</style>
<docs-resize>
    <div class="demo-hero-accent">
        <div class="center flow text-center" style="--center-max: 40rem">
            <h1 class="text-4 leading-heading">Monitor everything. Fix anything.</h1>
            <p class="text-1 text-muted">
                Real-time observability for your infrastructure. Alerts, dashboards, and traces in one place.
            </p>
            <div class="cluster is-center is-tight">
                <a class="button" href="#">Start free trial</a>
            </div>
            <p class="text--1 text-subtle">No credit card required.</p>
        </div>
    </div>
</docs-resize>

Full-page image

Background image fills the hero, content overlays with a scrim for legibility. The scrim is a vertical linear-gradient layered on top of the image — strong enough to ensure text contrast, light enough to keep the image visible. Setting color on the wrapper lets .button.is-ghost inherit the light foreground via currentColor; the demo also overrides the ghost border for legibility on imagery.

Built for the long term

Software that works after everyone who built it has left.

Start a project See recent work

<style>
    .demo-hero-full-image {
        background-image:
            linear-gradient(to bottom, oklch(0% 0 0 / 0.25), oklch(0% 0 0 / 0.65)),
            url("https://picsum.photos/seed/brio-hero/1600/900");
        background-size: cover;
        background-position: center;
        border-radius: var(--radius-md);
        min-block-size: 28rem;
        padding: var(--space-2xl) var(--space-md);
        color: oklch(99% 0 0);
        display: grid;
        place-items: center;
    }
    .demo-hero-full-image .button.is-ghost {
        color: inherit;
        border-color: oklch(99% 0 0 / 0.45);
    }
</style>
<docs-resize>
    <div class="demo-hero-full-image">
        <div class="center flow text-center" style="--center-max: 40rem">
            <h1 class="text-5 leading-heading">Built for the long term</h1>
            <p class="text-1" style="opacity: 0.85">
                Software that works after everyone who built it has left.
            </p>
            <div class="cluster is-center is-tight">
                <a class="button" href="#">Start a project</a>
                <a class="button is-ghost" href="#">See recent work</a>
            </div>
        </div>
    </div>
</docs-resize>

How it works

All variants follow the same shape: a wrapper controls width and rhythm, .flow stacks content with consistent vertical spacing, .cluster arranges buttons horizontally. Centered variants use .center with text-align center; the split variant uses .switcher for automatic stacking at narrow widths.

The full-page-image hero overlays content on a scrim (linear-gradient in the same property as the image) and sets a light text color on the wrapper so children inherit currentColor; the demo also tints the ghost button border translucent white for legibility on imagery.