Section reference › Heroes & page tops

Hero `"type": "hero"`

The big opening section at the top of a home page: headline, intro, buttons and a visual. Ten layouts, from a simple split to a photo slider, video, lead form or property search.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "hero",
  "variant": "split",
  "eyebrow": "Trusted by 2,000+ teams",
  "title": "Projects that finish <em>on time</em>",
  "text": "Plan, track and deliver client work in one calm place. No spreadsheets, no status meetings.",
  "buttons": [
    {
      "label": "Start free trial",
      "href": "signup.html",
      "style": "primary",
      "icon": "arrow-right"
    },
    {
      "label": "Watch demo",
      "video": "https://www.youtube.com/embed/ScMzIvxBSi4",
      "style": "outline",
      "icon": "play-circle"
    }
  ],
  "image": "placeholder",
  "badge": {
    "icon": "award",
    "title": "Product of the year",
    "text": "SaaS Awards 2026"
  },
  "rating": {
    "stars": 5,
    "text": "4.9 from 1,200 reviews"
  }
}

Options#

Option	Type	Default	Description
`variant`	string	`split`	Layout. An unknown value falls back to split. Values: `split \| image \| gradient \| slider \| minimal \| video \| form \| search \| collage \| center-image`
`eyebrow`	string	—	Small label above the headline.
`title`	string	—	Headline (the page's h1). Wrap a word in <em> to highlight it.
`text`	string	—	Intro paragraph.
`buttons`	array	—	Buttons shown under the text. See the button fields below.
`rating`	object	—	Star rating line under the buttons: { "stars": 4.5, "text": "4.9 from 1,200 reviews" }. stars defaults to 5.
`stats`	array	—	Row of numbers under the buttons: [{ "number", "label" }].
`image`	string	—	Photo: side image (split, minimal), background (image, video, form, search), screenshot (gradient), wide image (center-image), or the only collage photo if images is empty.
`overlay`	number	`0.55`	image, video, form, search, slider: darkness over the photo, 0 to 1.
`fullHeight`	boolean	`true`	Makes the hero fill the screen height. Set false for a shorter hero.
`badge`	object	—	split and collage: floating badge { "icon", "title", "text" }. Icon defaults to "award".
`images`	array	—	collage: up to 3 photos.
`cards`	array	—	center-image: floating cards [{ "icon", "title", "text" }] over the photo (two look best).
`video`	string	—	video: YouTube embed URL opened by the play button.
`form`	object	—	form: { "title", "text", "fields": [ … ], "button" }. Button text defaults to "Submit".
`search`	object	—	search: { "action": "properties.html", "placeholder": "…", "style": "bar" \| "card", "tabs": true }. Buy/Rent tabs are on by default.
`tags`	array	—	search: "Popular:" links under the box [{ "label", "href" }].
`slides`	array	—	slider: the slides.
`interval`	number	`6000`	slider: milliseconds between slides.
`align`	string	—	image and slider: set to "center" to centre the text. Values: `center`
`scrollHint`	boolean	`true`	image: shows a bouncing "scroll down" arrow at the bottom. Set false to hide it.
`next`	string	—	image: the id of the section the scroll arrow jumps to.

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

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link target, e.g. "contact.html" or "#pricing". Defaults to "#".
`style`	string	`primary`	Button look. Values: `primary \| outline \| light \| dark \| accent \| link`
`icon`	string	—	Bootstrap Icons name shown after the label (e.g. "arrow-right"). "link" buttons get an arrow automatically.
`video`	string	—	YouTube embed URL (https://www.youtube.com/embed/VIDEO_ID). When set, the button opens the video in a pop-up instead of following href.

Fields of each entry in `stats`#

Option	Type	Default	Description
`number`	string	—	The number, e.g. "2,000+".
`label`	string	—	Caption.

Fields of each entry in `slides`#

Option	Type	Default	Description
`image`	string	—	Background photo of the slide.
`overlay`	number	—	Darkness for this slide (defaults to the hero's overlay).
`eyebrow`	string	—	Small label.
`title`	string	—	Slide headline (the first slide is the h1).
`text`	string	—	Paragraph.
`buttons`	array	—	Buttons.
`rating`	object	—	Optional rating line.
`stats`	array	—	Optional numbers.

Fields of each entry in `cards`#

Option	Type	Default	Description
`icon`	string	—	Bootstrap Icons name (default "star-fill").
`title`	string	—	Bold line.
`text`	string	—	Small line.

Fields of each entry in `form.fields`#

Option	Type	Default	Description
`label`	string	—	Label shown above the field.
`name`	string	—	Field name sent with the form (e.g. "email").
`type`	string	`text`	Field type. Any HTML input type works as well. Values: `text \| email \| tel \| date \| number \| password \| select \| textarea`
`options`	array	—	For type "select": the list of choices (strings).
`placeholder`	string	—	Grey hint text inside the field (not used by select).
`required`	boolean	`false`	Makes the field required.
`col`	number	`full width`	Set to 6 for a half-width field (two side by side). Anything else is full width.
`rows`	number	`4`	For type "textarea": number of visible lines.

Variants and styles#

split#

Text on the left, a photo on the right with an optional floating badge. The default. Tone "light".

JSON

{
  "type": "hero",
  "variant": "split",
  "eyebrow": "Trusted by 2,000+ teams",
  "title": "Projects that finish <em>on time</em>",
  "text": "Plan, track and deliver client work in one calm place. No spreadsheets, no status meetings.",
  "buttons": [
    {
      "label": "Start free trial",
      "href": "signup.html",
      "style": "primary",
      "icon": "arrow-right"
    },
    {
      "label": "Watch demo",
      "video": "https://www.youtube.com/embed/ScMzIvxBSi4",
      "style": "outline",
      "icon": "play-circle"
    }
  ],
  "image": "placeholder",
  "badge": {
    "icon": "award",
    "title": "Product of the year",
    "text": "SaaS Awards 2026"
  },
  "rating": {
    "stars": 5,
    "text": "4.9 from 1,200 reviews"
  }
}

image#

Full-screen background photo with a dark overlay and text on the left (or centred with "align": "center"). Tone "dark".

JSON

{
  "type": "hero",
  "variant": "image",
  "image": "placeholder",
  "overlay": 0.55,
  "eyebrow": "Coastal kitchen · Est. 2012",
  "title": "Fresh fish, open fire, a view of the harbour",
  "text": "Seasonal plates cooked over oak and served on the water’s edge.",
  "buttons": [
    {
      "label": "Book a table",
      "href": "reservations.html"
    },
    {
      "label": "See the menu",
      "href": "menu.html",
      "style": "outline"
    }
  ],
  "stats": [
    {
      "number": "4.8",
      "label": "Google rating"
    },
    {
      "number": "12",
      "label": "Years open"
    }
  ]
}

gradient#

Centred text on a soft coloured glow, with an optional wide screenshot underneath. Tone "light".

JSON

{
  "type": "hero",
  "variant": "gradient",
  "fullHeight": false,
  "eyebrow": "New: AI summaries",
  "title": "Your inbox, finally under control",
  "text": "Mailbird sorts, summarises and schedules your email so you can get back to real work.",
  "buttons": [
    {
      "label": "Start free trial",
      "href": "signup.html",
      "style": "primary",
      "icon": "arrow-right"
    },
    {
      "label": "Watch demo",
      "video": "https://www.youtube.com/embed/ScMzIvxBSi4",
      "style": "outline",
      "icon": "play-circle"
    }
  ],
  "image": "placeholder"
}

slider#

Full-screen photo slideshow; each slide has its own text and buttons. Tone "dark".

JSON

{
  "type": "hero",
  "variant": "slider",
  "interval": 6000,
  "slides": [
    {
      "image": "placeholder",
      "eyebrow": "Summer menu",
      "title": "Long lunches under the olive trees",
      "text": "Our garden terrace is open daily from noon.",
      "buttons": [
        {
          "label": "Book a table",
          "href": "reservations.html"
        }
      ]
    },
    {
      "image": "placeholder",
      "eyebrow": "Private dining",
      "title": "A room of your own for up to 24 guests",
      "text": "Set menus, wine pairings and a dedicated host.",
      "buttons": [
        {
          "label": "Plan an event",
          "href": "events.html",
          "style": "light"
        }
      ]
    }
  ]
}

minimal#

A very large headline with a short text and buttons below, and an optional wide image. Tone "light".

JSON

{
  "type": "hero",
  "variant": "minimal",
  "eyebrow": "Design studio — Berlin",
  "title": "We design brands people remember.",
  "text": "Identity, packaging and websites for independent businesses since 2011.",
  "buttons": [
    {
      "label": "See our work",
      "href": "work.html",
      "style": "primary",
      "icon": "arrow-right"
    }
  ],
  "image": "placeholder"
}

video#

Centred text over a background photo with a large play button that opens a YouTube video in a pop-up. Tone "dark".

JSON

{
  "type": "hero",
  "variant": "video",
  "image": "placeholder",
  "video": "https://www.youtube.com/embed/ScMzIvxBSi4",
  "eyebrow": "Watch the 2-minute tour",
  "title": "A gym that feels like a club",
  "text": "Classes, coaching and a community that turns up for each other.",
  "buttons": [
    {
      "label": "Claim a free week",
      "href": "free-trial.html"
    }
  ]
}

form#

Background photo with text on the left and a lead form card on the right. Tone "dark".

JSON

{
  "type": "hero",
  "variant": "form",
  "image": "placeholder",
  "overlay": 0.6,
  "eyebrow": "Evening & weekend courses",
  "title": "Your next chapter starts <em>here</em>",
  "text": "Part-time programmes for working adults, on campus or live online.",
  "rating": {
    "stars": 5,
    "text": "4.8 from 6,200 student reviews"
  },
  "form": {
    "title": "Get your free course plan",
    "text": "An adviser will reply within one working day.",
    "fields": [
      {
        "label": "Full name",
        "name": "name",
        "required": true
      },
      {
        "label": "Email",
        "name": "email",
        "type": "email",
        "required": true
      },
      {
        "label": "Interested in",
        "name": "subject",
        "type": "select",
        "options": [
          "Design",
          "Development",
          "Data",
          "Marketing"
        ]
      }
    ],
    "button": "Get my course plan"
  }
}

search#

Background photo with centred text and a property search box (Buy/Rent, city, type, price, beds) plus "Popular" tag links. Made for real-estate demos. Tone "dark".

JSON

{
  "type": "hero",
  "variant": "search",
  "image": "placeholder",
  "eyebrow": "Over 1,200 homes in 12 cities",
  "title": "Find a place you’ll love to call home",
  "text": "Buy, rent or sell with local agents who know every street.",
  "search": {
    "placeholder": "Address, city or ZIP",
    "action": "properties.html"
  },
  "tags": [
    {
      "label": "Miami villas",
      "href": "properties.html?city=Miami"
    },
    {
      "label": "New York rentals",
      "href": "rent.html"
    }
  ]
}

collage#

Text on the left, a collage of up to three overlapping photos on the right, with an optional badge. Tone "light".

JSON

{
  "type": "hero",
  "variant": "collage",
  "eyebrow": "Wedding & portrait photography",
  "title": "Honest photos of your best days",
  "text": "Relaxed, natural coverage for weddings and families across Northern California.",
  "buttons": [
    {
      "label": "Check my dates",
      "href": "contact.html"
    },
    {
      "label": "View galleries",
      "href": "portfolio.html",
      "style": "outline"
    }
  ],
  "images": [
    "placeholder",
    "placeholder",
    "placeholder"
  ],
  "badge": {
    "icon": "camera",
    "title": "300+ weddings",
    "text": "since 2014"
  }
}

center-image#

Centred text on a soft glow with a wide photo below and floating stat cards over its corners. Tone "light".

JSON

{
  "type": "hero",
  "variant": "center-image",
  "fullHeight": false,
  "eyebrow": "Studio founded 2008",
  "title": "Light, material and <em>time</em>",
  "text": "Architecture that grows better with age, designed with the people who will use it.",
  "buttons": [
    {
      "label": "Explore projects",
      "href": "projects.html",
      "style": "primary",
      "icon": "arrow-right"
    },
    {
      "label": "Meet the studio",
      "href": "studio.html",
      "style": "outline"
    }
  ],
  "image": "placeholder",
  "cards": [
    {
      "icon": "award",
      "title": "22 awards",
      "text": "Since 2012"
    },
    {
      "icon": "recycle",
      "title": "-41% carbon",
      "text": "Average vs. baseline"
    }
  ]
}

Tips#

Use one hero per page, as the first section. It contains the page's h1.
Defaults: padding "none"; tone "dark" for image, video, form, slider and search (text sits on a photo) and "light" for the others.
On photo backgrounds, raise "overlay" (e.g. 0.65) if the text is hard to read.
The search variant belongs to the real-estate demo: its city and type lists are filled from the properties in data.json and it submits to properties.html. On other demos those lists are empty.
The video URL must be the embed form: https://www.youtube.com/embed/VIDEO_ID.
"fluid" has no effect on the hero.

Editing it in the HTML files#

The variant is a class on the section, e.g. hero-split. The headline is h1.hero-title. Background photos are set as style="background-image:url(…)" on .hero-bg; the overlay darkness is the opacity of .hero-overlay.

Where it's used#

Open these pages in template/ to see it working:

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

Hero "type": "hero"

Example#

Options#

Fields of each entry in buttons#

Fields of each entry in stats#

Fields of each entry in slides#

Fields of each entry in cards#

Fields of each entry in form.fields#

Variants and styles#

split#

image#

gradient#

slider#

minimal#

video#

form#

search#

collage#

center-image#

Tips#

Editing it in the HTML files#

Where it's used#

Hero `"type": "hero"`

Fields of each entry in `buttons`#

Fields of each entry in `stats`#

Fields of each entry in `slides`#

Fields of each entry in `cards`#

Fields of each entry in `form.fields`#