blog pattern

Blog index

List of blog posts with filters, search, and pagination.

When to use it

Public-facing /blog or /posts entry point.

  • Latest posts above the fold
  • Search and filter by tag
  • Per-post 60-character excerpt

Layout regions

  • header
  • hero
  • toolbar
  • list
  • pagination
  • footer

States

  • default
  • empty
  • partial

Example

<Container variant="lg"><h1>Blog</h1><Toolbar /><Grid variant="auto" min="320px">{posts.map((p) => <PostCard key={p.slug} {...p} />)}</Grid><Pagination /></Container>

The full Blog index pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Blog index pattern in your project.