Back to site

Travel Alert Banner

Highlighted notice for advisories, exclusions, or time-sensitive travel updates.

Check travel advisories before you buy

Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions.

View current advisories 
---
import Button from "@core-elements/button/Button.astro";
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="highlight" body="Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions." buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "View current advisories",
      "hideText": false,
      "link": "",
      "iconName": "arrow-top-right-on-square",
      "iconPosition": "after",
      "variant": "secondary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Check travel advisories before you buy" iconColor="orange" iconName="exclamation-triangle" paddingVertical="lg" variant="default"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: default
  iconName: exclamation-triangle
  iconColor: orange
  heading: Check travel advisories before you buy
  body: Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: View current advisories
      hideText: false
      link: ''
      iconName: arrow-top-right-on-square
      iconPosition: after
      variant: secondary
      size: sm
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: lg
---

Overview

Pairs an icon with a title and markdown body; optional buttons link to official advisories or help. Uses a left accent border and highlight background by default. variant adjusts bar weight, icon treatment, density, and action alignment.

Properties

variant enum | default: default

Visual tone and density of the alert.

Accepted values:
  • default
  • soft
  • compact
  • strong
  • inline
  • tip
  • success

iconName enum | default: exclamation-triangle

Icon shown beside the alert content.

iconColor enum | default: orange

Color accent for the icon.

Accepted values:
  • default
  • blue
  • green
  • yellow
  • orange
  • red
  • purple
  • pink
  • cyan

heading string | default: Check travel advisories before you buy

Short alert title (e.g. travel advisory or coverage note).

body string | default: Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions that apply to natural disasters or civil unrest.

Main alert message with optional links.

buttonSections array | default: array

Optional buttons (e.g. Read advisory, Contact us).

colorScheme enum | default: inherit

Color scheme theme for the banner.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: highlight

Background color for the banner.

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

paddingVertical enum | default: lg

Vertical padding for the banner.

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

Examples

Banner styles

Check travel advisories before you buy

Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions.

View current advisories 
---
import Button from "@core-elements/button/Button.astro";
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="highlight" body="Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions." buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "View current advisories",
      "hideText": false,
      "link": "",
      "iconName": "arrow-top-right-on-square",
      "iconPosition": "after",
      "variant": "secondary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Check travel advisories before you buy" iconColor="orange" iconName="exclamation-triangle" paddingVertical="lg" variant="default"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: default
  iconName: exclamation-triangle
  iconColor: orange
  heading: Check travel advisories before you buy
  body: Government travel advice can affect coverage for certain regions. Confirm your destination is eligible and read any general exclusions.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: View current advisories
      hideText: false
      link: ''
      iconName: arrow-top-right-on-square
      iconPosition: after
      variant: secondary
      size: sm
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: lg
---

General advice only

This site compares products; it does not provide personal financial or medical advice. Read the PDS before purchase.

---
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="surface" body="This site compares products; it does not provide personal financial or medical advice. Read the PDS before purchase." buttonSections={
  []
} colorScheme="inherit" heading="General advice only" iconColor="blue" iconName="information-circle" paddingVertical="md" variant="soft"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: soft
  iconName: information-circle
  iconColor: blue
  heading: General advice only
  body: This site compares products; it does not provide personal financial or medical advice. Read the PDS before purchase.
  buttonSections: []
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: md
---

Pre-existing conditions

You must declare conditions when asked—non-disclosure can void cover.

Declaration guide 
---
import Button from "@core-elements/button/Button.astro";
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="highlight" body="You must declare conditions when asked—non-disclosure can void cover." buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Declaration guide",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "secondary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Pre-existing conditions" iconColor="default" iconName="clock" paddingVertical="sm" variant="compact"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: compact
  iconName: clock
  iconColor: default
  heading: Pre-existing conditions
  body: You must declare conditions when asked—non-disclosure can void cover.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Declaration guide
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: secondary
      size: sm
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: sm
---

Do not travel warnings

Some policies exclude claims where your government advises against travel. Check Smartraveller or equivalent before you pay.

Read policy wording 
---
import Button from "@core-elements/button/Button.astro";
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="base" body="Some policies exclude claims where your government advises against travel. Check Smartraveller or equivalent before you pay." buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Read policy wording",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Do not travel warnings" iconColor="red" iconName="shield-exclamation" paddingVertical="xl" variant="strong"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: strong
  iconName: shield-exclamation
  iconColor: red
  heading: Do not travel warnings
  body: Some policies exclude claims where your government advises against travel. Check Smartraveller or equivalent before you pay.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Read policy wording
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: sm
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: xl
---

Destination not listed?

Try a nearby region or call us—some postcodes map to broader zones.

Contact 
---
import Button from "@core-elements/button/Button.astro";
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="highlight" body="Try a nearby region or call us—some postcodes map to broader zones." buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Contact",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "secondary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Destination not listed?" iconColor="purple" iconName="map-pin" paddingVertical="md" variant="inline"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: inline
  iconName: map-pin
  iconColor: purple
  heading: Destination not listed?
  body: Try a nearby region or call us—some postcodes map to broader zones.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Contact
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: secondary
      size: sm
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: md
---

Tip

Buying within 21 days of your first trip deposit often unlocks cancel-for-any-reason add-ons from select insurers.

---
import TravelAlertBanner from "@page-sections/info-blocks/travel-alert-banner/TravelAlertBanner.astro";
---

<TravelAlertBanner
backgroundColor="surface" body="Buying within 21 days of your first trip deposit often unlocks cancel-for-any-reason add-ons from select insurers." buttonSections={
  []
} colorScheme="inherit" heading="Tip" iconColor="yellow" iconName="light-bulb" paddingVertical="lg" variant="tip"
/>
---
blocks:
  _component: page-sections/info-blocks/travel-alert-banner
  variant: tip
  iconName: light-bulb
  iconColor: yellow
  heading: Tip
  body: Buying within 21 days of your first trip deposit often unlocks cancel-for-any-reason add-ons from select insurers.
  buttonSections: []
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: lg
---