blog pattern

Tag page

Posts filtered by tag.

When to use it

/blog/tags/{tag} for taxonomies.

  • Show all posts under the tag
  • Quick swap to another tag

Layout regions

header
hero
Tag pill + post count
all-tags
Other tags row
posts

States

default
Posts under tag
empty
No posts under tag

Example

<Container><h1>Posts tagged <Tag variant="static">{tag}</Tag></h1><Grid>{posts.map((p) => <PostCard key={p.slug} {...p} />)}</Grid></Container>

The full Tag page pattern specifies 1 exact microcopy string, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.

Related

Build the Tag page pattern in your project.