Brio

Tag Page Header

The header for a tag page -- introduces the tag, shows the post count, and optionally provides context. Sits above an article listing.

Core: .flow, .cluster, .badge, .divider

Extras: .breadcrumb

Simple

Tag name as the heading with a count. Clean and direct.

CSS

24 articles

 
<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="flow flow-space-xs">
            <h1 class="text-3 text-semibold leading-heading">CSS</h1>
            <p class="text-muted">24 articles</p>
            <hr class="divider"/>
        </div>
    </div>
</docs-resize>

With description

A short editorial description gives context beyond just the tag name. Useful when tags have overlapping scope.

Design Systems

Tokens, naming conventions, component APIs, and the organizational challenges of maintaining a shared design language.

12 articles

 
<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="flow flow-space-xs">
            <h1 class="text-3 text-semibold leading-heading">Design Systems</h1>
            <p class="text-muted" style="max-inline-size: 50ch">
                Tokens, naming conventions, component APIs, and the organizational challenges of maintaining a shared design language.
            </p>
            <p class="text--1 text-subtle">12 articles</p>
            <hr class="divider"/>
        </div>
    </div>
</docs-resize>

With breadcrumb

Navigation context above the heading. Helps orient readers who arrived via search or a direct link.

Performance

Core Web Vitals, loading strategies, rendering optimization, and measuring what matters.

15 articles

 
<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="flow flow-space-sm">
            <nav class="breadcrumb" aria-label="Breadcrumb">
                <ol>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Tags</a></li>
                    <li><span aria-current="page">Performance</span></li>
                </ol>
            </nav>
            <div class="flow flow-space-xs">
                <h1 class="text-3 text-semibold leading-heading">Performance</h1>
                <p class="text-muted" style="max-inline-size: 50ch">
                    Core Web Vitals, loading strategies, rendering optimization, and measuring what matters.
                </p>
                <p class="text--1 text-subtle">15 articles</p>
            </div>
            <hr class="divider"/>
        </div>
    </div>
</docs-resize>

With badge

The tag rendered as a badge alongside the count. Visually ties the header back to how tags appear in article listings and footers.

Accessibility

11 articles

WCAG compliance, semantic HTML, keyboard navigation, screen reader testing, and inclusive design patterns. 

<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="flow flow-space-sm">
            <div class="cluster gap-xs" style="--cluster-align: center">
                <h1 class="text-3 text-semibold leading-heading">Accessibility</h1>
                <span class="badge is-accent">11 articles</span>
            </div>
            <p class="text-muted" style="max-inline-size: 50ch">
                WCAG compliance, semantic HTML, keyboard navigation, screen reader testing, and inclusive design patterns.
            </p>
            <hr class="divider"/>
        </div>
    </div>
</docs-resize>

Accessibility

Patterns