Article Footer

Custom Styles

A few custom styles are included in the page style block used by some of the patterns.

<style>
    .article-category {
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-primary-text);
        font-size: var(--step--2);
        font-weight: var(--font-weight-medium);
    }
    .article-category.is-accent {
        color: var(--color-accent-text);
    }
    .author-links {
        display: flex;
        gap: var(--space-sm);
        font-size: var(--step--1);
    }
</style>

The section that wraps up a blog post: author info, tags, dates, and sometimes a call to action. Three variants matching the tech, community, and editorial blog listing styles.

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

Extras: .avatar

Custom CSS: 2 helper classes (.article-category, .author-links) included in page style block

Minimal (tech blog)

Restrained and typographic. Tags as plain text links, dates, and a one-line bio. No avatar, no decoration.

<docs-resize>
    <div class="flow flow-space-md" style="max-inline-size: 40rem">
        <hr class="divider"/>
        <footer>
            <div class="flow flow-space-sm">
                <div>
                    <div class="cluster gap-xs">
                        <span class="article-category">Tagged:</span>
                        <a href="#" class="text--1 text-muted" style="text-decoration: none">oklch</a>
                        <a href="#" class="text--1 text-muted" style="text-decoration: none">color systems</a>
                        <a href="#" class="text--1 text-muted" style="text-decoration: none">dark mode</a>
                        <a href="#" class="text--1 text-muted" style="text-decoration: none">design tokens</a>
                    </div>
                </div>
                <div>
                    <div class="flow flow-space-2xs text--1 text-subtle">
                        <p>
                            Published <time datetime="2026-03-15">March 15, 2026</time>
                            · Updated <time datetime="2026-03-20">March 20, 2026</time>
                        </p>
                        <p>
                            Written by <span style="color: var(--color-text)">Jordan Lee</span> -- building tools for design systems and writing about the process.
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</docs-resize>

Community (running blog)

Author-forward with avatar, short bio, and social presence. Tags as badges to match the listing style. Warmer accent color.

<docs-resize>
    <div class="flow flow-space-md" style="max-inline-size: 42rem">
        <hr class="divider"/>
        <footer>
            <div class="flow flow-space-md">
                <div class="cluster gap-2xs">
                    <span class="badge is-accent text--2">Race Report</span>
                    <span class="badge is-neutral text--2">Ultra</span>
                    <span class="badge is-neutral text--2">Trail</span>
                    <span class="badge is-neutral text--2">Training</span>
                </div>
                <div class="media" style="--media-gap: var(--space-sm)">
                    <div class="avatar is-lg">
                        <img src="https://picsum.photos/seed/runner1/128/128" alt="Sarah Chen"/>
                    </div>
                    <div class="flow flow-space-2xs">
                        <p class="text-medium">Sarah Chen</p>
                        <p class="text--1 text-muted" style="max-inline-size: 40ch">
                            Ultra runner and physical therapist based in Portland. Chasing mountain summits and sub-24 buckles. Runs with Cascadia Trail Collective.
                        </p>
                        <div class="author-links">
                            <a href="#">Strava</a>
                            <a href="#">All posts</a>
                        </div>
                    </div>
                </div>
                <p class="text--1 text-subtle">
                    Published <time datetime="2026-04-08">April 8, 2026</time>
                </p>
            </div>
        </footer>
    </div>
</docs-resize>

Editorial (magazine)

Publication feel with author title and role. More formal bio, links to author archive and social. Dates include both published and updated.

<docs-resize>
    <div class="flow flow-space-md" style="max-inline-size: 42rem">
        <hr class="divider"/>
        <footer>
            <div class="flow flow-space-md">
                <div class="media" style="--media-gap: var(--space-md)">
                    <div class="avatar is-xl">
                        <img src="https://picsum.photos/seed/ed-author1/200/200" alt="Elena Vasquez"/>
                    </div>
                    <div>
                        <div class="flow flow-space-2xs">
                            <p class="text-1 text-semibold">Elena Vasquez</p>
                            <p class="text--1 text-muted">Senior Editor, Platform &amp; Infrastructure</p>
                            <p class="text--1" style="max-inline-size: 45ch">
                                Elena covers browser internals, rendering engines, and the web platform. Previously at Mozilla and the W3C. She has strong opinions about specificity.
                            </p>
                            <div class="author-links">
                                <a href="#">Archive</a>
                                <a href="#">Mastodon</a>
                                <a href="#">RSS</a>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="divider"/>
                <div class="cluster is-apart text--1 text-subtle">
                    <p>
                        Published <time datetime="2026-04-10">April 10, 2026</time>
                        · Updated <time datetime="2026-04-11">April 11, 2026</time>
                    </p>
                    <p>14 min read</p>
                </div>
            </div>
        </footer>
    </div>
</docs-resize>

Accessibility

Use <footer> for the wrapper -- it signals the end of the article's content to assistive technology
Use <time> with datetime for machine-readable dates
Avatar images need meaningful alt text (the author's name)
Tag links should be descriptive -- the tag name itself is the link text