Brio

Metadata Row

Horizontal metadata rows built entirely from existing primitives. No custom CSS needed -- .cluster provides the flex-wrap and gap, utilities handle color and size.

Core: .cluster, .badge

Extras: .avatar

Utilities: .text-muted, .text--1, .text-medium, .gap-*

Date and reading time

The simplest form. A .cluster with muted text and middot separators.

· 6 min read 
<docs-resize>
        <div class="cluster text--1 text-muted">
            <time datetime="2026-04-10">Apr 10, 2026</time>
            <span>·</span>
            <span>6 min read</span>
        </div>
    </docs-resize>

Author with date

A nested .cluster pairs an avatar with a name. The outer cluster holds the author group alongside date and reading time.

Jordan Lee
Jordan Lee · · 6 min read 
<docs-resize>
        <div class="cluster text--1 text-muted">
            <span class="cluster gap-2xs">
                <div class="avatar is-sm">
                    <img src="https://picsum.photos/seed/meta1/64/64" alt="Jordan Lee"/>
                </div>
                <span class="text-medium" style="color: var(--color-text)">Jordan Lee</span>
            </span>
            <span>·</span>
            <time datetime="2026-04-10">Apr 10, 2026</time>
            <span>·</span>
            <span>6 min read</span>
        </div>
    </docs-resize>

Multiple authors

Author groups separated by "and" text. Each author is its own nested cluster.

Sam Chen
Sam Chen and
Alex Rivera
Alex Rivera · 
<docs-resize>
        <div class="cluster text--1 text-muted">
            <span class="cluster gap-2xs">
                <div class="avatar is-sm">
                    <img src="https://picsum.photos/seed/meta2/64/64" alt="Sam Chen"/>
                </div>
                <span class="text-medium" style="color: var(--color-text)">Sam Chen</span>
            </span>
            <span>and</span>
            <span class="cluster gap-2xs">
                <div class="avatar is-sm">
                    <img src="https://picsum.photos/seed/meta3/64/64" alt="Alex Rivera"/>
                </div>
                <span class="text-medium" style="color: var(--color-text)">Alex Rivera</span>
            </span>
            <span>·</span>
            <time datetime="2026-03-28">Mar 28, 2026</time>
        </div>
    </docs-resize>

With tags

Badges inline with metadata. The cluster wraps naturally when space is tight.

Jordan Lee
Jordan Lee · · 6 min read · CSS Tokens 
<docs-resize>
        <div class="cluster text--1 text-muted">
            <span class="cluster gap-2xs">
                <div class="avatar is-sm">
                    <img src="https://picsum.photos/seed/meta1/64/64" alt="Jordan Lee"/>
                </div>
                <span class="text-medium" style="color: var(--color-text)">Jordan Lee</span>
            </span>
            <span>·</span>
            <time datetime="2026-04-10">Apr 10, 2026</time>
            <span>·</span>
            <span>6 min read</span>
            <span>·</span>
            <span class="cluster gap-3xs">
                <span class="badge is-accent text--2">CSS</span>
                <span class="badge is-neutral text--2">Tokens</span>
            </span>
        </div>
    </docs-resize>

Accessibility

Patterns