Homepage Header

Usage

Homepage Header The highest-impact module in the system, used exclusively on the homepage. It is the only module with a full-bleed background video (with gradient overlays at the top and bottom for legibility), making it the most visually immersive entry point on the site. It is not interchangeable with any other Page Header variant — it is purpose-built for the homepage only. The module combines three elements: 1. Hero content (bottom-left on Desktop) A large white hero heading (fi-heading/hero-title, the largest heading size in the system), a supporting body paragraph in white, and two CTA buttons — a white-filled primary button and a white-outlined secondary button. On Desktop, these sit bottom-left over the video. On Tablet and Mobile they overlay the bottom of the video frame. 2. Featured panel (bottom-right on Desktop, below video on Tablet/Mobile) A tinted card anchored to the bottom-right corner of the module on Desktop, with a distinctive notched corner decoration connecting it visually to the video above. It contains a bold H4 heading, a short body paragraph, and an underlined text link (e.g. "Read more"). This panel is intended for a single high-priority announcement or campaign — for example, a new strategy launch or a major programme opening. Props: panelHeader, panelCopy, panelLink. 3. Video controls A small frosted-glass pause/play button is overlaid on the video on Desktop and Tablet. On Mobile a "Pause video" text label appears instead. Props: header, copy (hero text), panelHeader, panelCopy, panelLink (featured panel). This module should always be the first module on the homepage, directly below the site navigation. Never use it on interior or listing pages — use the appropriate Page Header variant instead. The module is available in Desktop, Tablet, and Mobile device variants.