Post header
The top of an article; category, title, byline, date, reading time, cover image.
Last updated
Engineering
Zero JavaScript until it earns its place
Why every section renders without a runtime, and what the islands are for.
6 min read
Show codeHide code
<PostHeader eyebrow="Engineering" heading="Zero JavaScript until it earns its place" author={{ name, avatar?, role? }} date="2026-09-18" readingTime="6 min read" media={{ src, alt }} />Add
npx @ava-ui/apogee add post-headerAPI
| Prop | Type | Default | Category | Description |
|---|---|---|---|---|
eyebrow |
string |
— | content | Category or kicker. |
heading |
string |
— | content | Required. |
description |
string |
— | content | Standfirst. |
author |
{ name, avatar?, role? } |
— | content | |
date |
string |
— | content | Required ISO date. |
readingTime |
string |
— | content | Free text, e.g. “6 min read”. |
media |
{ src, alt, width?, height? } |
— | content | Cover image. |
locale |
string |
page locale or 'en' |
content | Date formatting locale. |
layout |
'centered' | 'split' |
'centered' |
layout | |
background, spacing, headingLevel, id |
headingLevel is 1 |
layout | As on every section. |
Layouts
Design
Designing sections that editors can fill
4 min read
Show codeHide code
<PostHeader layout="split" … />Accessibility
- Renders a
headerlabelled by the title; the default heading level is 1, one per page.