Page Header

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

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

<PageHeader backgroundColor="none" 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.
  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 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.

colorScheme string | default: inherit

backgroundColor string | default: none

paddingVertical string | default: 4xl

Examples

Theme

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

<PageHeader backgroundColor="none" 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.
  colorScheme: inherit
  backgroundColor: none
  paddingVertical: 4xl
---

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

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
---