Skip to content
Mistral Studio

Modules: heroes and headings

The modules that open a page or a section: full screen hero, two-tone section heading, manifesto statement, service and case study headers, search bar.

Updated August 23, 2026 · 4 min read · Applies from version 1.0.0

These six modules open a page or introduce a section. Most of them carry the page's single h1.

Full screen hero with background video and showreel card

The home page opener: a background video, image or solid colour behind a headline, a subtitle and two buttons, plus an optional showreel card that opens a video in a lightbox with controls and sound.

  • Content — heading (h1 by default), subtitle, first and second button (label, link, icon, style).
  • Background — Looping video (MP4 from your File Manager + a poster image), Image, or Solid color.
  • Showreel card — MP4, poster, card title, duration or caption. Without a video the card is not rendered.
  • Style — text left or centered, three heading sizes, a button style per button, light or dark text tone, overlay colour with diagonal and bottom overlays, and Viewport fit: full screen, full screen minus the logo band (when the client logo marquee sits right below), or as tall as its content.
  • Overlap the header (on by default) — lets the transparent header sit over the hero. Turn it off if you switch the header's Transparent over dark hero sections setting off.

The video and showreel set-up is detailed in Video.

Two-tone section heading with eyebrow

The theme's signature heading: a short eyebrow, a strong lead phrase followed by a muted continuation, an optional description and an optional button.

  • End with an accent full stop adds the coloured period after the heading.
  • Heading tag h1 / h2 / h3 / paragraph, chosen separately from the visual size (Display, Extra large, Large, Medium).
  • Layouts: stacked, heading left with the button on the right, or eyebrow in a side column. Width: content width, wide, or inherit from the parent column. Heading and description measures (narrow, comfortable, full width). Light or dark tone.

Use it above any module that has its own Show section heading switch turned off.

Manifesto statement with side label and buttons

An opening statement for the top of a page, right under a hero: a short label in a side column, a two-tone sentence, a supporting paragraph and up to two buttons. Colour schemes include a dark panel; Reduce the bottom padding tightens it against the module below (the "Agency statement with key figures" section uses it this way).

Service header with icon and badge

The opening block of a service detail page: a back link, an icon tile with a badge, the page title (h1), a short intro and up to two buttons. Eighteen icons to choose from (compass, people, trending up, search, screen, target, globe, megaphone, layers, sparkles, award, building, mail, map pin, phone, star, play, check). Block width narrow (about 860 px) or full container, aligned left or centered.

Case study header with key facts

The opening block of a case study: a back link, two badges (expertise and sector), the title, a short summary and a row of key facts (label + value, e.g. Client, Year, Scope) separated by a rule whose style you choose (solid two pixel, hairline, none).

Search bar with quick suggestions

The header of the search results page. Its title is built from the term in the URL; a pill search field posts to the results page; quick suggestion chips propose terms; a message is shown when no term has been entered yet.

  • Search behavior — results page path (/hs-search-results by default), keep suggestions visible after a search, and which content types to search: website pages, landing pages, blog posts, knowledge base articles.
  • The visible and screen-reader labels, including the result count sentences, are editable.

It is already placed in the Search results system template. See System pages.

See also