Skip to main content
The hero section is the primary above-the-fold component for landing pages. It renders a large headline (with an optional highlighted span), a subtitle, and one or two CTA buttons side by side. You can optionally attach an image that renders alongside or behind the copy, depending on your theme. Use hero once per page, as the very first section, when you want maximum visual impact and a clear entry-point action for visitors.

​
Data fields

​
string
A small eyebrow label rendered above the main title — for example "An OlonJS collections demo". Optional. Use it to add context or a campaign tag without changing the headline.
​
string
required
The primary headline. Rendered in the largest type on the page. If you also supply titleHighlight, this field holds the first (un-highlighted) part of the headline — for example "Notes on the".
​
string
An optional second span of the headline that your theme renders in an accent color or with a decorative treatment — for example "craft of software". OlonJS concatenates title and titleHighlight visually while keeping them separate fields so the highlight can be styled independently.
​
string
required
A sentence or short paragraph of supporting copy rendered below the headline. Aim for one to three sentences that set expectations and reinforce the primary CTA.
​
CtaSchema
required
The main call-to-action button. Always rendered. See CtaSchema fields below.
​
CtaSchema
An optional second call-to-action rendered beside the primary button. Use it to offer an alternative path — for example a “Browse topics” link alongside a “Read the posts” primary action.
​
ImageSelectionSchema
An optional image rendered in the hero layout. See ImageSelectionSchema fields below.

​
CtaSchema fields

Each CTA object (both primaryCta and secondaryCta) uses the following shape:
​
string
required
A unique identifier for this CTA button. Used as the React key and for analytics targeting — for example "home-hero-cta-1".
​
string
required
The visible button text — for example "Read the posts".
​
string
required
The URL or path the button links to — for example "/posts" or "https://example.com".
​
"primary" | "secondary" | "ghost"
required
Controls the button’s visual style. Use "primary" for the most prominent action, "secondary" for a supporting action, and "ghost" for a low-emphasis link-style button.

​
ImageSelectionSchema fields

​
string
required
The fully qualified URL of the image — for example an Unsplash URL or a path to a file in your /public folder.
​
string
required
Descriptive alt text for the image, used by screen readers and rendered as the alt attribute on the <img> element.

​
Settings fields

Settings live in the settings object alongside data in the section JSON.
​
"none" | "sm" | "md" | "lg" | "xl"
Vertical padding applied above the section. Defaults to the theme base when omitted. 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. Set to "none" when the next section bleeds directly into the hero background.

​
JSON example

The following example is taken directly from home.json:
Setting paddingBottom to "none" is a common pattern when the next section (such as a posts-list or stats-band) uses a contrasting background that should appear flush against the hero.

​
Used on pages

The hero section is typically used once on the home page (home.json) as the first section. Interior pages use page-hero instead, which renders a more compact banner suited to content pages.