Rebar UI

1.0

synthetic

PageHeader

The one h1 on a page: kicker, title and lede, with optional breadcrumbs, byline or cover.

Header variantsCentred, with breadcrumbs and byline, with cover
Perspectives

Reflections worth sitting with.

Essays, dialogues and letters on the Faith, from the Athic team.

To Be Sorted At The Harvest

What the parable of the wheat and the weeds asks of us now.

ATAthic team12 Oct 20266 min read
Dialogues

Motherhood

A conversation about a mother, a doubt and a lighted window.

Small variantsKicker only, start-aligned, long title
Contact

Get in touch

Mission

Why Athic exists

Independent, and honest about it.

Letters

On the Perils of Conscience and the Quiet Work of Examination

In context

Article header on a phoneBreadcrumbs, title, lede, byline, then the cover art

To Be Sorted At The Harvest

What the parable of the wheat and the weeds asks of us now.

ATAthic team12 Oct 20266 min read

Props

PropTypeRequiredDefault
kickerReactNodeNo—
titleReactNodeYes—
ledeReactNodeNo—
align"center" | "start" | undefinedNocenter
breadcrumbsBreadcrumbItem[] | undefinedNo—
coverReactNodeNo—
metaReactNodeNo—
maxWidth"md" | "lg" | undefinedNomd

Accessibility

Renders a <header> with the page's <h1>. Breadcrumbs are the real Breadcrumb (a nav landmark named "Breadcrumb", the last item aria-current="page") with 44px targets. A cover is decorative and sits under a bottom scrim so the inverse title keeps contrast on any art.

data-rebar-* attributes

data-rebar-component="page-header" with data-rebar-align, data-rebar-max-width and data-rebar-cover. Parts: cover, body, kicker, title, lede, meta.

Migrating to Ant Design

Ant Design's PageHeader (title, subTitle, breadcrumb) maps to title, lede, breadcrumbs; there is no kicker, meta or cover prop.