Tag Listing

An all-tags page for a blog. Three structural approaches: a flat cluster for small tag sets, alphabetical groups for larger ones, and a weighted cloud where size reflects post count.

Core: .flow, .cluster, .badge (with .badge-count), .divider

Flat

A single cluster of tags with post counts. Works well for sites with fewer than 30 tags.

CSS 24 JavaScript 18 Performance 15 Design Systems 12 Accessibility 11 Tooling 9 Typography 8 Color 7 HTML 6 Layout 6 Animation 5 Dark Mode 4 Testing 4 API Design 3 Web Components 3 Build Tools 2

<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="cluster gap-xs">
            <a href="#" class="badge is-neutral text--1">CSS <span class="badge-count">24</span></a>
            <a href="#" class="badge is-neutral text--1">JavaScript <span class="badge-count">18</span></a>
            <a href="#" class="badge is-neutral text--1">Performance <span class="badge-count">15</span></a>
            <a href="#" class="badge is-neutral text--1">Design Systems <span class="badge-count">12</span></a>
            <a href="#" class="badge is-neutral text--1">Accessibility <span class="badge-count">11</span></a>
            <a href="#" class="badge is-neutral text--1">Tooling <span class="badge-count">9</span></a>
            <a href="#" class="badge is-neutral text--1">Typography <span class="badge-count">8</span></a>
            <a href="#" class="badge is-neutral text--1">Color <span class="badge-count">7</span></a>
            <a href="#" class="badge is-neutral text--1">HTML <span class="badge-count">6</span></a>
            <a href="#" class="badge is-neutral text--1">Layout <span class="badge-count">6</span></a>
            <a href="#" class="badge is-neutral text--1">Animation <span class="badge-count">5</span></a>
            <a href="#" class="badge is-neutral text--1">Dark Mode <span class="badge-count">4</span></a>
            <a href="#" class="badge is-neutral text--1">Testing <span class="badge-count">4</span></a>
            <a href="#" class="badge is-neutral text--1">API Design <span class="badge-count">3</span></a>
            <a href="#" class="badge is-neutral text--1">Web Components <span class="badge-count">3</span></a>
            <a href="#" class="badge is-neutral text--1">Build Tools <span class="badge-count">2</span></a>
        </div>
    </div>
</docs-resize>

Grouped

Tags organized alphabetically. Each letter gets a heading and its own cluster. Scales to large tag sets without becoming overwhelming.

A

Accessibility 11 Animation 5 API Design 3

B

Build Tools 2

C

Color 7 CSS 24

D

Dark Mode 4 Design Systems 12

H

HTML 6

J

JavaScript 18

L

Layout 6

P

Performance 15

T

Testing 4 Tooling 9 Typography 8

W

Web Components 3

<docs-resize>
    <div class="flow flow-space-md" style="max-inline-size: 40rem">
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">A</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Accessibility <span class="badge-count">11</span></a>
                    <a href="#" class="badge is-neutral text--1">Animation <span class="badge-count">5</span></a>
                    <a href="#" class="badge is-neutral text--1">API Design <span class="badge-count">3</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">B</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Build Tools <span class="badge-count">2</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">C</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Color <span class="badge-count">7</span></a>
                    <a href="#" class="badge is-neutral text--1">CSS <span class="badge-count">24</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">D</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Dark Mode <span class="badge-count">4</span></a>
                    <a href="#" class="badge is-neutral text--1">Design Systems <span class="badge-count">12</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">H</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">HTML <span class="badge-count">6</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">J</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">JavaScript <span class="badge-count">18</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">L</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Layout <span class="badge-count">6</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">P</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Performance <span class="badge-count">15</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">T</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Testing <span class="badge-count">4</span></a>
                    <a href="#" class="badge is-neutral text--1">Tooling <span class="badge-count">9</span></a>
                    <a href="#" class="badge is-neutral text--1">Typography <span class="badge-count">8</span></a>
                </div>
            </div>
        </section>
        <section>
            <div class="flow flow-space-xs">
                <h2 class="text-1 text-semibold">W</h2>
                <div class="cluster gap-xs">
                    <a href="#" class="badge is-neutral text--1">Web Components <span class="badge-count">3</span></a>
                </div>
            </div>
        </section>
    </div>
</docs-resize>

Weighted

Tag size reflects post count using type scale utilities. More posts means larger text. No badges -- just plain links in a cluster, letting the size differences do the work.

CSS JavaScript Performance Design Systems Accessibility Tooling Typography Color HTML Layout Animation Dark Mode Testing API Design Web Components Build Tools

<docs-resize>
    <div style="max-inline-size: 40rem">
        <div class="cluster gap-s" style="--cluster-align: baseline">
            <a href="#" class="text-2 text-semibold link-plain">CSS</a>
            <a href="#" class="text-1 text-medium link-plain">JavaScript</a>
            <a href="#" class="text-1 text-medium link-plain">Performance</a>
            <a href="#" class="text-0 link-plain">Design Systems</a>
            <a href="#" class="text-0 link-plain">Accessibility</a>
            <a href="#" class="text--1 link-plain">Tooling</a>
            <a href="#" class="text--1 link-plain">Typography</a>
            <a href="#" class="text--1 link-plain">Color</a>
            <a href="#" class="text--1 link-plain">HTML</a>
            <a href="#" class="text--1 link-plain">Layout</a>
            <a href="#" class="text--2 text-muted link-plain">Animation</a>
            <a href="#" class="text--2 text-muted link-plain">Dark Mode</a>
            <a href="#" class="text--2 text-muted link-plain">Testing</a>
            <a href="#" class="text--2 text-muted link-plain">API Design</a>
            <a href="#" class="text--2 text-muted link-plain">Web Components</a>
            <a href="#" class="text--2 text-muted link-plain">Build Tools</a>
        </div>
    </div>
</docs-resize>

Accessibility

Tag links use the tag name as link text -- descriptive and unambiguous
Post counts in the flat and grouped variants are visible text, not hidden in attributes
The weighted variant conveys importance visually through size -- consider adding a count in a .visually-hidden span if the count matters for screen reader users
The grouped variant uses <section> elements with headings so letter groups are navigable landmarks