Back to site

Travel Insurance Hero

Hero for travel insurance landing and comparison pages with optional trust line.

Compare travel insurance

Cover your next trip with confidence

Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget.

Compare plans

Rated 4.8/5 by travelers · Policies from leading insurers 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="surface" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Compare plans",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="Compare travel insurance" heading="Cover your next trip with confidence" maxContentWidth="2xl" paddingVertical="4xl" subtext="Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget." trustLine="Rated 4.8/5 by travelers · Policies from leading insurers" variant="default"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  eyebrow: Compare travel insurance
  heading: Cover your next trip with confidence
  subtext: Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget.
  trustLine: Rated 4.8/5 by travelers · Policies from leading insurers
  variant: default
  maxContentWidth: 2xl
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Compare plans
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 4xl
---

Overview

Use this hero at the top of comparison funnels: it mirrors Hero Center but adds an optional trust line under the buttons for ratings, underwriter names, or regulatory copy. Use variant for typography and trust-line treatment, and maxContentWidth with colorScheme / backgroundColor for different bands.

Properties

eyebrow string | default: Compare travel insurance

Short label above the headline (e.g. trip type or campaign).

heading string | default: Cover your next trip with confidence

Primary hero headline for the comparison page.

subtext string | default: Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget.

Supporting copy explaining the value of comparing plans.

trustLine string | default: Rated 4.8/5 by travelers · Policies from leading insurers

Optional one-line trust message below buttons (e.g. ratings or underwriter).

variant enum | default: default

Visual style preset for the hero layout and typography.

Accepted values:
  • default
  • compact
  • emphasis
  • editorial
  • bordered

maxContentWidth enum | default: 2xl

Maximum width of the hero content column.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

buttonSections array | default: array

Primary call-to-action buttons.

colorScheme enum | default: inherit

Color scheme theme for the section.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: surface

Background color behind the hero.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

paddingVertical enum | default: 4xl

Vertical padding for the section.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
  • 6xl

Examples

Variants

Compare travel insurance

Cover your next trip with confidence

Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget.

Compare plans

Rated 4.8/5 by travelers · Policies from leading insurers 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="surface" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Compare plans",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="Compare travel insurance" heading="Cover your next trip with confidence" maxContentWidth="2xl" paddingVertical="4xl" subtext="Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget." trustLine="Rated 4.8/5 by travelers · Policies from leading insurers" variant="default"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  eyebrow: Compare travel insurance
  heading: Cover your next trip with confidence
  subtext: Compare benefits, limits, and price in one place—then buy a policy that fits your itinerary and budget.
  trustLine: Rated 4.8/5 by travelers · Policies from leading insurers
  variant: default
  maxContentWidth: 2xl
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Compare plans
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 4xl
---

Ski trip · Europe

Compare winter sports cover

Add gear and avalanche options in one flow.

Compare now 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="base" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Compare now",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="Ski trip · Europe" heading="Compare winter sports cover" paddingVertical="2xl" subtext="Add gear and avalanche options in one flow." trustLine="" variant="compact"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  variant: compact
  eyebrow: Ski trip · Europe
  heading: Compare winter sports cover
  subtext: Add gear and avalanche options in one flow.
  trustLine: ''
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Compare now
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 2xl
---

Compare plans from trusted insurers

Same medical limits, clearer excess—pick what you need for your dates.

View plans

Underwritten by A-rated carriers · FCIS member 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="surface" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "View plans",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="" heading="Compare plans from trusted insurers" paddingVertical="4xl" subtext="Same medical limits, clearer excess—pick what you need for your dates." trustLine="Underwritten by A-rated carriers · FCIS member" variant="emphasis"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  variant: emphasis
  eyebrow: ''
  heading: Compare plans from trusted insurers
  subtext: Same medical limits, clearer excess—pick what you need for your dates.
  trustLine: Underwritten by A-rated carriers · FCIS member
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: View plans
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 4xl
---

Annual multi-trip

One policy, many getaways

Unlimited trips under 45 days per trip—ideal if you travel often for work or family.

See annual quotes 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="none" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "See annual quotes",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" eyebrow="Annual multi-trip" heading="One policy, many getaways" maxContentWidth="3xl" paddingVertical="5xl" subtext="Unlimited trips under 45 days per trip—ideal if you travel often for work or family." trustLine="" variant="editorial"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  variant: editorial
  eyebrow: Annual multi-trip
  heading: One policy, many getaways
  subtext: Unlimited trips under 45 days per trip—ideal if you travel often for work or family.
  trustLine: ''
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: See annual quotes
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: none
  maxContentWidth: 3xl
  paddingVertical: 5xl
---

Cruise add-ons

Medical evacuation & cabin confinement

Optional bundles for cruise itineraries—compare add-on pricing next to standard travel cover.

Explore cruise options 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="highlight" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Explore cruise options",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "secondary",
      "size": "md"
    }
  ]
} colorScheme="light" eyebrow="Cruise add-ons" heading="Medical evacuation & cabin confinement" maxContentWidth="lg" paddingVertical="3xl" subtext="Optional bundles for cruise itineraries—compare add-on pricing next to standard travel cover." trustLine="" variant="bordered"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  variant: bordered
  eyebrow: Cruise add-ons
  heading: Medical evacuation & cabin confinement
  subtext: Optional bundles for cruise itineraries—compare add-on pricing next to standard travel cover.
  trustLine: ''
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Explore cruise options
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: secondary
      size: md
  colorScheme: light
  backgroundColor: highlight
  maxContentWidth: lg
  paddingVertical: 3xl
---

Theme

24/7 assistance

Emergency help when you are far from home

Medical, evacuation, and repatriation—see how each plan handles your destination.

Compare emergency limits

Hotline in 40+ languages 

---
import Button from "@core-elements/button/Button.astro";
import TravelInsuranceHero from "@page-sections/heroes/travel-insurance-hero/TravelInsuranceHero.astro";
---

<TravelInsuranceHero
backgroundColor="accent" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Compare emergency limits",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="dark" eyebrow="24/7 assistance" heading="Emergency help when you are far from home" paddingVertical="4xl" subtext="Medical, evacuation, and repatriation—see how each plan handles your destination." trustLine="Hotline in 40+ languages" variant="default"
/>
---
blocks:
  _component: page-sections/heroes/travel-insurance-hero
  variant: default
  eyebrow: 24/7 assistance
  heading: Emergency help when you are far from home
  subtext: Medical, evacuation, and repatriation—see how each plan handles your destination.
  trustLine: Hotline in 40+ languages
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Compare emergency limits
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: dark
  backgroundColor: accent
  paddingVertical: 4xl
---