Back to site

Page Header

Centered page header with an eyebrow, heading, and supporting text.

Aerial view over clear tropical water toward a coastline with boats
Travel insurance guide

What does travel insurance cover?

Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims.

---
import PageHeader from "@page-sections/headers/page-header/PageHeader.astro";
---

<PageHeader backgroundColor="none" backgroundImage={{"source":"https://images.unsplash.com/photo-1506929562872-bb421503ef21?q=80&w=2000&auto=format&fit=crop","alt":"Aerial view over clear tropical water toward a coastline with boats"}} colorScheme="inherit" eyebrow="Travel insurance guide" heading="What does travel insurance cover?" paddingVertical="4xl" subtext="Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims." />
---
blocks:
  _component: page-sections/headers/page-header
  eyebrow: Travel insurance guide
  heading: What does travel insurance cover?
  subtext: Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims.
  backgroundImage:
    source: https://images.unsplash.com/photo-1506929562872-bb421503ef21?q=80&w=2000&auto=format&fit=crop
    alt: Aerial view over clear tropical water toward a coastline with boats
  colorScheme: inherit
  backgroundColor: none
  paddingVertical: 4xl
---

Overview

Use this section for internal pages that need a clear title band without hero CTAs. It keeps the content centered in a restrained width, and exposes backgroundImage (source + alt for the animated hero), colorScheme, backgroundColor, and paddingVertical so the header can sit on neutral or emphasized page bands.

Properties

eyebrow string | default: Helpful eyebrow text

heading string | default: Page heading text

subtext string | default: Supporting copy for the page header goes here.

backgroundImage string | default: object

animatedWebGLBackground string | default: false

colorScheme string | default: inherit

backgroundColor string | default: none

paddingVertical string | default: 4xl

Examples

Theme

Aerial view over clear tropical water toward a coastline with boats
Travel insurance guide

What does travel insurance cover?

Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims.

---
import PageHeader from "@page-sections/headers/page-header/PageHeader.astro";
---

<PageHeader backgroundColor="none" backgroundImage={{"source":"https://images.unsplash.com/photo-1506929562872-bb421503ef21?q=80&w=2000&auto=format&fit=crop","alt":"Aerial view over clear tropical water toward a coastline with boats"}} colorScheme="inherit" eyebrow="Travel insurance guide" heading="What does travel insurance cover?" paddingVertical="4xl" subtext="Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims." />
---
blocks:
  _component: page-sections/headers/page-header
  eyebrow: Travel insurance guide
  heading: What does travel insurance cover?
  subtext: Understand common inclusions, optional extras, and the exclusions that can affect overseas medical, baggage, and cancellation claims.
  backgroundImage:
    source: https://images.unsplash.com/photo-1506929562872-bb421503ef21?q=80&w=2000&auto=format&fit=crop
    alt: Aerial view over clear tropical water toward a coastline with boats
  colorScheme: inherit
  backgroundColor: none
  paddingVertical: 4xl
---
Aerial view over clear tropical water toward a coastline with boats
Claims and support

Get help before you lodge a claim

Check emergency contacts, document requirements, and insurer response timeframes before you submit travel disruption or medical expenses.

---
import PageHeader from "@page-sections/headers/page-header/PageHeader.astro";
---

<PageHeader backgroundColor="accent" colorScheme="dark" eyebrow="Claims and support" heading="Get help before you lodge a claim" paddingVertical="4xl" subtext="Check emergency contacts, document requirements, and insurer response timeframes before you submit travel disruption or medical expenses." />
---
blocks:
  _component: page-sections/headers/page-header
  eyebrow: Claims and support
  heading: Get help before you lodge a claim
  subtext: Check emergency contacts, document requirements, and insurer response timeframes before you submit travel disruption or medical expenses.
  colorScheme: dark
  backgroundColor: accent
  paddingVertical: 4xl
---

Spacing

Aerial view over clear tropical water toward a coastline with boats
FAQ

Answers before you compare

A tighter header treatment for pages where the content should begin immediately below the title.

---
import PageHeader from "@page-sections/headers/page-header/PageHeader.astro";
---

<PageHeader backgroundColor="surface" colorScheme="inherit" eyebrow="FAQ" heading="Answers before you compare" paddingVertical="2xl" subtext="A tighter header treatment for pages where the content should begin immediately below the title." />
---
blocks:
  _component: page-sections/headers/page-header
  eyebrow: FAQ
  heading: Answers before you compare
  subtext: A tighter header treatment for pages where the content should begin immediately below the title.
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 2xl
---