Blog Post Header

About this block

Blog Post Header is the top of an article page: the category label, the post title at h1 scale (text-4xl, xl:text-5xl), the author with an avatar (AveryStone from ui/avatars), the publish date May 14, 2025, the read time 7 min, and a wide Placeholder cover at aspect-video below. All meta sits on one line so the title carries the full visual weight of the fold.

A single post const drives the block. Sizing the title as an h1 rather than an h2 makes this block a page opener, not a section heading.

When to use

Reach for this block as the very top of a blog post page, directly above the article body. The installer swaps the category, the post title, the author name and avatar import, the date, and the read time.

A natural flow around it on a Portfolio Pro page:

Before

• Navbar

After

• Article body

What you can display

One strong use is the personal essay header. Other uses:

• Tutorial header. Difficulty level in the category slot, estimated completion time as read time.
• Case study opener. Client type in category, project name as the title, the lead designer as author.
• Guest post. A different avatar import with the guest author name, their byline in the meta.

Tip: the cover image sets the visual tone for the whole article; the Placeholder aspect-video gives enough room to show process work or a key screen.