blog pattern

Author page

Author profile + their posts.

When to use it

/authors/{slug} or /blog/author/{slug}.

  • Author identity clear (avatar, bio, links)
  • Their posts listed below

Layout regions

  • header
  • hero
  • posts

States

  • default
  • empty

Example

<Container><Stack align="center" size="6"><Avatar size="xl" /><h1>{author.name}</h1><p>{author.bio}</p></Stack><Grid>{posts.map((p) => <PostCard key={p.slug} {...p} />)}</Grid></Container>

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

Build the Author page pattern in your project.