Back to site

Before You Go Checklist

Icon list of pre-trip reminders for travelers buying insurance.

Checklist

Before you go

Complete these steps so your policy matches your trip and claims stay straightforward.

  • Register your travel dates and destination on your policy documents.

  • Save emergency assistance numbers from your insurer on your phone.

  • Keep receipts for high-value items you want baggage cover for. 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="base" checklistItems={
  [
    {
      "text": "Register your travel dates and destination on your policy documents.",
      "iconName": "calendar-days",
      "iconColor": "green"
    },
    {
      "text": "Save emergency assistance numbers from your insurer on your phone.",
      "iconName": "phone",
      "iconColor": "blue"
    },
    {
      "text": "Keep receipts for high-value items you want baggage cover for.",
      "iconName": "document-text",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="Checklist" heading="Before you go" paddingVertical="4xl" subtext="Complete these steps so your policy matches your trip and claims stay straightforward." variant="default"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  eyebrow: Checklist
  heading: Before you go
  variant: default
  subtext: Complete these steps so your policy matches your trip and claims stay straightforward.
  checklistItems:
    - text: Register your travel dates and destination on your policy documents.
      iconName: calendar-days
      iconColor: green
    - text: Save emergency assistance numbers from your insurer on your phone.
      iconName: phone
      iconColor: blue
    - text: Keep receipts for high-value items you want baggage cover for.
      iconName: document-text
      iconColor: default
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Combines a section heading with the List building block so editors can add, reorder, and edit checklist lines with icons in CloudCannon. variant switches between icon, numbered, and bullet lists, card framing, alignment, and density.

Properties

eyebrow string | default: Checklist

Optional label above the checklist heading.

heading string | default: Before you go

Section title (e.g. Before you go).

variant enum | default: default

Alignment, list marker style, and density.

Accepted values:
  • default
  • card
  • centered
  • dense
  • spacious
  • numbered
  • bullets

subtext string | default: Complete these steps so your policy matches your trip and claims stay straightforward.

Intro text above the checklist items.

checklistItems array | default: array

Steps or reminders with optional icons.

Item Properties:

text string | default: Checklist item text

Checklist item content.

iconName enum | default: check

Icon shown before the item text.

iconColor enum | default: green

Icon color accent.

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

colorScheme enum | default: inherit

Color scheme theme for the section.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Background color behind the checklist.

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

List styles

Checklist

Before you go

Complete these steps so your policy matches your trip and claims stay straightforward.

  • Register your travel dates and destination on your policy documents.

  • Save emergency assistance numbers from your insurer on your phone.

  • Keep receipts for high-value items you want baggage cover for. 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="base" checklistItems={
  [
    {
      "text": "Register your travel dates and destination on your policy documents.",
      "iconName": "calendar-days",
      "iconColor": "green"
    },
    {
      "text": "Save emergency assistance numbers from your insurer on your phone.",
      "iconName": "phone",
      "iconColor": "blue"
    },
    {
      "text": "Keep receipts for high-value items you want baggage cover for.",
      "iconName": "document-text",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="Checklist" heading="Before you go" paddingVertical="4xl" subtext="Complete these steps so your policy matches your trip and claims stay straightforward." variant="default"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  eyebrow: Checklist
  heading: Before you go
  variant: default
  subtext: Complete these steps so your policy matches your trip and claims stay straightforward.
  checklistItems:
    - text: Register your travel dates and destination on your policy documents.
      iconName: calendar-days
      iconColor: green
    - text: Save emergency assistance numbers from your insurer on your phone.
      iconName: phone
      iconColor: blue
    - text: Keep receipts for high-value items you want baggage cover for.
      iconName: document-text
      iconColor: default
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Packing

Documents to carry

Keep both digital and paper copies where required.

  • Passport valid 6+ months beyond return

  • Visa or e-visa confirmation 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="none" checklistItems={
  [
    {
      "text": "Passport valid 6+ months beyond return",
      "iconName": "identification",
      "iconColor": "default"
    },
    {
      "text": "Visa or e-visa confirmation",
      "iconName": "document-text",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="Packing" heading="Documents to carry" paddingVertical="3xl" subtext="Keep both digital and paper copies where required." variant="card"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: card
  eyebrow: Packing
  heading: Documents to carry
  subtext: Keep both digital and paper copies where required.
  checklistItems:
    - text: Passport valid 6+ months beyond return
      iconName: identification
      iconColor: default
    - text: Visa or e-visa confirmation
      iconName: document-text
      iconColor: default
  colorScheme: inherit
  backgroundColor: none
  paddingVertical: 3xl
---

Trip checklist

Centered for narrow columns or testimonial-style sections.

  • Sync policy PDF to offline storage

  • Share insurer contacts with your travel companion 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="surface" checklistItems={
  [
    {
      "text": "Sync policy PDF to offline storage",
      "iconName": "cloud-arrow-down",
      "iconColor": "blue"
    },
    {
      "text": "Share insurer contacts with your travel companion",
      "iconName": "user-group",
      "iconColor": "green"
    }
  ]
} colorScheme="inherit" eyebrow="" heading="Trip checklist" paddingVertical="4xl" subtext="Centered for narrow columns or testimonial-style sections." variant="centered"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: centered
  eyebrow: ''
  heading: Trip checklist
  subtext: Centered for narrow columns or testimonial-style sections.
  checklistItems:
    - text: Sync policy PDF to offline storage
      iconName: cloud-arrow-down
      iconColor: blue
    - text: Share insurer contacts with your travel companion
      iconName: user-group
      iconColor: green
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 4xl
---

Quick

Last-minute reminders

Tighter list for sidebars or footers.

  • Check baggage weight limits

  • Photograph your gear serial numbers 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="base" checklistItems={
  [
    {
      "text": "Check baggage weight limits",
      "iconName": "scale",
      "iconColor": "default"
    },
    {
      "text": "Photograph your gear serial numbers",
      "iconName": "camera",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="Quick" heading="Last-minute reminders" paddingVertical="2xl" subtext="Tighter list for sidebars or footers." variant="dense"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: dense
  eyebrow: Quick
  heading: Last-minute reminders
  subtext: Tighter list for sidebars or footers.
  checklistItems:
    - text: Check baggage weight limits
      iconName: scale
      iconColor: default
    - text: Photograph your gear serial numbers
      iconName: camera
      iconColor: default
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 2xl
---

Steps

How to claim

Numbered flow for procedural content—icons are hidden for this list type.

  1. Notify the insurer as soon as reasonably possible

  2. Gather receipts, reports, and medical certificates

  3. Submit via the online portal or email 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="highlight" checklistItems={
  [
    {
      "text": "Notify the insurer as soon as reasonably possible",
      "iconName": "",
      "iconColor": "default"
    },
    {
      "text": "Gather receipts, reports, and medical certificates",
      "iconName": "",
      "iconColor": "default"
    },
    {
      "text": "Submit via the online portal or email",
      "iconName": "",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="Steps" heading="How to claim" paddingVertical="3xl" subtext="Numbered flow for procedural content—icons are hidden for this list type." variant="numbered"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: numbered
  eyebrow: Steps
  heading: How to claim
  subtext: Numbered flow for procedural content—icons are hidden for this list type.
  checklistItems:
    - text: Notify the insurer as soon as reasonably possible
      iconName: ''
      iconColor: default
    - text: Gather receipts, reports, and medical certificates
      iconName: ''
      iconColor: default
    - text: Submit via the online portal or email
      iconName: ''
      iconColor: default
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: 3xl
---

Common exclusions

Standard bullets—pair with policy wording links in your CMS.

  • Intoxication or illegal activity

  • Undeclared high-risk activities

  • Travel against medical advice 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="base" checklistItems={
  [
    {
      "text": "Intoxication or illegal activity",
      "iconName": "",
      "iconColor": "default"
    },
    {
      "text": "Undeclared high-risk activities",
      "iconName": "",
      "iconColor": "default"
    },
    {
      "text": "Travel against medical advice",
      "iconName": "",
      "iconColor": "default"
    }
  ]
} colorScheme="inherit" eyebrow="" heading="Common exclusions" paddingVertical="3xl" subtext="Standard bullets—pair with policy wording links in your CMS." variant="bullets"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: bullets
  eyebrow: ''
  heading: Common exclusions
  subtext: Standard bullets—pair with policy wording links in your CMS.
  checklistItems:
    - text: Intoxication or illegal activity
      iconName: ''
      iconColor: default
    - text: Undeclared high-risk activities
      iconName: ''
      iconColor: default
    - text: Travel against medical advice
      iconName: ''
      iconColor: default
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 3xl
---

Wellness

Before long-haul flights

Larger list text for accessibility-first pages.

  • Stretch and walk the aisle when safe

  • Stay hydrated—limit alcohol on board 

---
import BeforeYouGoChecklist from "@page-sections/info-blocks/before-you-go-checklist/BeforeYouGoChecklist.astro";
---

<BeforeYouGoChecklist
backgroundColor="surface" checklistItems={
  [
    {
      "text": "Stretch and walk the aisle when safe",
      "iconName": "heart",
      "iconColor": "red"
    },
    {
      "text": "Stay hydrated—limit alcohol on board",
      "iconName": "beaker",
      "iconColor": "blue"
    }
  ]
} colorScheme="inherit" eyebrow="Wellness" heading="Before long-haul flights" paddingVertical="5xl" subtext="Larger list text for accessibility-first pages." variant="spacious"
/>
---
blocks:
  _component: page-sections/info-blocks/before-you-go-checklist
  variant: spacious
  eyebrow: Wellness
  heading: Before long-haul flights
  subtext: Larger list text for accessibility-first pages.
  checklistItems:
    - text: Stretch and walk the aisle when safe
      iconName: heart
      iconColor: red
    - text: Stay hydrated—limit alcohol on board
      iconName: beaker
      iconColor: blue
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 5xl
---