Section reference › Heroes & page tops

Page header `"type": "page-header"`

The title banner at the top of an inner page (About, Contact, Services...), with a breadcrumb trail and an optional background photo. Use it as the first section of every page that is not a home page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "page-header",
  "title": "Our services",
  "text": "Strategy, design and engineering for brands that want to grow.",
  "image": "placeholder",
  "overlay": 0.6
}

Options#

Option	Type	Default	Description
`title`	string (HTML allowed)	—	Page title, shown as the H1. Required.
`text`	string	—	Short line under the title.
`image`	string	—	Background photo. Without it you get a plain banner with a soft colour glow.
`overlay`	number	`0.7`	Darkness of the layer over the photo (only with "image"). 0 = no darkening, 1 = black. Values: `0 - 1`
`align`	string	`center`	"start" left-aligns the breadcrumb, title and text. Values: `center \| start`
`crumb`	string	`same as title`	Text of the last breadcrumb item, when you want it shorter than the title.
`breadcrumb`	array	`Home > title`	Replaces the whole breadcrumb trail. The last item is the current page and is not a link.
`tone`	string	`dark with an image, alt without`	Common option; this section defaults it to "dark" when "image" is set and "alt" when not. Values: `light \| alt \| dark \| primary`
`padding`	string	`none`	Common option; this section defaults it to "none" (the banner has its own spacing). Values: `none \| sm \| md \| lg`

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `breadcrumb`#

Option	Type	Default	Description
`label`	string	—	Text of the breadcrumb item.
`href`	string	—	Link address. Leave it out on the last item (the current page).

Tips#

The automatic "Home" link points to index.html in multi-page demos, or to the demo's own page in one-page demos. Use "breadcrumb" to add middle steps, e.g. [{"label": "Home", "href": "index.html"}, {"label": "Services", "href": "services.html"}, {"label": "Branding"}].
Use one page-header per page, as the first section: its title is the page's H1.
With a busy photo, raise "overlay" (e.g. 0.8) so the white text stays readable.
The "fluid" common option has no effect here.

Editing it in the HTML files#

The title is h1.page-title and the text is p.page-text. The background photo is the background-image in the style of .hero-bg, and the darkness is the opacity of .hero-overlay. The breadcrumb is the ol.crumbs list.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/about.html (source src/demos/creative-agency/pages/about.json)
Real Estate: template/real-estate/about.html (source src/demos/real-estate/pages/about.json)
Corporate: template/corporate/about.html (source src/demos/corporate/pages/about.json)
Finance: template/finance/about.html (source src/demos/finance/pages/about.json)
Law Firm: template/law-firm/about.html (source src/demos/law-firm/pages/about.json)
SaaS Product: template/saas/about.html (source src/demos/saas/pages/about.json)
Mobile App: template/mobile-app/about.html (source src/demos/mobile-app/pages/about.json)
Tech Conference: template/conference/about.html (source src/demos/conference/pages/about.json)
Online Academy: template/education/about.html (source src/demos/education/pages/about.json)
Restaurant: template/restaurant/about.html (source src/demos/restaurant/pages/about.json)
Coffee Shop: template/cafe/about.html (source src/demos/cafe/pages/about.json)
Hotel & Resort: template/hotel/about.html (source src/demos/hotel/pages/about.json)
Wedding: template/wedding/about.html (source src/demos/wedding/pages/about.json)
Gym & Fitness: template/gym/about.html (source src/demos/gym/pages/about.json)
Yoga Studio: template/yoga/about.html (source src/demos/yoga/pages/about.json)
Day Spa & Salon: template/spa/about.html (source src/demos/spa/pages/about.json)
Medical Clinic: template/medical/about.html (source src/demos/medical/pages/about.json)
Dental Clinic: template/dental/about.html (source src/demos/dental/pages/about.json)
Pet Care: template/pet-care/about.html (source src/demos/pet-care/pages/about.json)
Construction: template/construction/about.html (source src/demos/construction/pages/about.json)
Car Dealer: template/car-dealer/about.html (source src/demos/car-dealer/pages/about.json)
Travel Agency: template/travel/about.html (source src/demos/travel/pages/about.json)
Photographer: template/photography/about.html (source src/demos/photography/pages/about.json)
Architecture Studio: template/architecture/awards.html (source src/demos/architecture/pages/awards.json)
Interior Design: template/interior-design/about.html (source src/demos/interior-design/pages/about.json)
Portfolio: template/portfolio/about.html (source src/demos/portfolio/pages/about.json)
Music Festival: template/music-festival/about.html (source src/demos/music-festival/pages/about.json)
Fashion Store: template/fashion-store/about.html (source src/demos/fashion-store/pages/about.json)
Charity: template/charity/about.html (source src/demos/charity/pages/about.json)
Logistics: template/logistics/about.html (source src/demos/logistics/pages/about.json)

Page header "type": "page-header"