Skip to main content
The page-hero section renders a compact title banner designed for interior pages. Unlike the full hero section, page-hero omits CTA buttons and large images — it focuses on giving the page a clear, scannable heading and a one- or two-sentence description. Use page-hero as the first section on every interior page: About, Contact, Posts archive, Tags index, and any static content page that needs a clear title without a conversion prompt.

​
Data fields

​
string
A small eyebrow label rendered above the title — for example "About" or "Archive". Optional. Use it to give visitors immediate location context, especially when the page title is more poetic than literal.
​
string
required
The page title rendered as the primary heading — for example "A journal that is also a diagram". Keep it concise; page-hero is a compact component and long titles may wrap awkwardly.
​
string
A short supporting sentence displayed below the title. Optional, but recommended — it gives search engines a readable summary and sets visitor expectations before they scroll into the page body.

​
Settings fields

​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section. Use "xl" on the first section of a page to clear the navigation bar.
​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied below the section. Omit to inherit the theme default.

​
JSON example

The following example is taken from about.json:
The description field is optional in the schema but strongly recommended for SEO and accessibility. When omitted, the section renders as a plain title banner with no supporting copy.

​
Used on pages

page-hero is the standard first section on every interior page in OlonJS sites: For the home page, use hero instead — it supports images and CTA buttons that page-hero does not.