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
- Title + intro
- toolbar
- Search + tag filter
- list
- Post cards with thumbnail + meta
- pagination
- footer
States
- default
- Posts loaded
- empty
- No posts
- partial
- No matches for filter
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.