Back to site

Plan Comparison Table

Side-by-side comparison of travel insurance plans with editable rows.

Compare plans

Find coverage that matches your trip

Review limits and benefits next to each other.

Comparison of travel insurance plan benefits and limits

Essential

$42 per trip

Select

Popular

Plus

$78 per trip

Select

Premier

$124 per trip

Select

Emergency medical

Up to $50k
Up to $250k
Up to $1M

Trip cancellation

—
Up to $5k
Up to $15k 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="base" caption="Comparison of travel insurance plan benefits and limits" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Emergency medical",
      "c0": "Up to $50k",
      "c1": "Up to $250k",
      "c2": "Up to $1M"
    },
    {
      "label": "Trip cancellation",
      "c0": "—",
      "c1": "Up to $5k",
      "c2": "Up to $15k"
    }
  ]
} eyebrow="Compare plans" heading="Find coverage that matches your trip" paddingVertical="4xl" plans={
  [
    {
      "planName": "Essential",
      "price": "$42",
      "pricePeriod": "per trip",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Plus",
      "price": "$78",
      "pricePeriod": "per trip",
      "badge": "Popular",
      "featured": true,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "primary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Premier",
      "price": "$124",
      "pricePeriod": "per trip",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="Review limits and benefits next to each other." variant="default"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  eyebrow: Compare plans
  heading: Find coverage that matches your trip
  subtext: Review limits and benefits next to each other.
  caption: Comparison of travel insurance plan benefits and limits
  variant: default
  plans:
    - planName: Essential
      price: $42
      pricePeriod: per trip
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: Plus
      price: $78
      pricePeriod: per trip
      badge: Popular
      featured: true
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: primary
          size: sm
    - planName: Premier
      price: $124
      pricePeriod: per trip
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
  comparisonRows:
    - label: Emergency medical
      c0: Up to $50k
      c1: Up to $250k
      c2: Up to $1M
    - label: Trip cancellation
      c0: —
      c1: Up to $5k
      c2: Up to $15k
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Overview

Add a heading and caption, then define one column per plan (name, price, optional badge, featured state, and CTA). Rows use labels with c0–c3 aligned to plan order—use up to four plans. The variant control changes row striping, border weight, elevation, and cell padding.

Properties

eyebrow string | default: Compare plans

Optional label above the section heading.

heading string | default: Find coverage that matches your trip

Title for the comparison section.

subtext string | default: Review limits and benefits next to each other. Values should line up with the number of plans you add.

Intro text shown above the table.

caption string | default: Comparison of travel insurance plan benefits and limits

Accessible table caption (screen readers); can match the heading.

variant enum | default: default

Table presentation style (borders, stripes, elevation).

Accepted values:
  • default
  • striped
  • minimal
  • elevated
  • compact

plans array | default: array

Columns across the top—one entry per plan tier or insurer.

Item Properties:

planName string | default: Plan name

Name of the plan or tier.

price string | default: $0

Displayed price (include currency symbol if needed).

pricePeriod string | default: per trip

Price context (e.g. per trip, per month).

badge string

Optional ribbon text (e.g. Popular); leave empty to hide.

featured boolean | default: false

Highlight this column with an accent border.

buttonSections array | default: array

CTA buttons for this plan column.

comparisonRows array | default: array

Rows of benefits or limits; cell values align with plan column order.

Item Properties:

label string | default: Benefit or limit name

Row label (left column), e.g. benefit name.

c0 string

Value for plan column 1 (leftmost plan).

c1 string

Value for plan column 2.

c2 string

Value for plan column 3.

c3 string

Value for plan column 4 (optional fourth plan).

colorScheme enum | default: inherit

Color scheme theme for the section.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Background color behind the section.

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

Table styles

Compare plans

Find coverage that matches your trip

Review limits and benefits next to each other.

Comparison of travel insurance plan benefits and limits

Essential

$42 per trip

Select

Popular

Plus

$78 per trip

Select

Premier

$124 per trip

Select

Emergency medical

Up to $50k
Up to $250k
Up to $1M

Trip cancellation

—
Up to $5k
Up to $15k 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="base" caption="Comparison of travel insurance plan benefits and limits" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Emergency medical",
      "c0": "Up to $50k",
      "c1": "Up to $250k",
      "c2": "Up to $1M"
    },
    {
      "label": "Trip cancellation",
      "c0": "—",
      "c1": "Up to $5k",
      "c2": "Up to $15k"
    }
  ]
} eyebrow="Compare plans" heading="Find coverage that matches your trip" paddingVertical="4xl" plans={
  [
    {
      "planName": "Essential",
      "price": "$42",
      "pricePeriod": "per trip",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Plus",
      "price": "$78",
      "pricePeriod": "per trip",
      "badge": "Popular",
      "featured": true,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "primary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Premier",
      "price": "$124",
      "pricePeriod": "per trip",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="Review limits and benefits next to each other." variant="default"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  eyebrow: Compare plans
  heading: Find coverage that matches your trip
  subtext: Review limits and benefits next to each other.
  caption: Comparison of travel insurance plan benefits and limits
  variant: default
  plans:
    - planName: Essential
      price: $42
      pricePeriod: per trip
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: Plus
      price: $78
      pricePeriod: per trip
      badge: Popular
      featured: true
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: primary
          size: sm
    - planName: Premier
      price: $124
      pricePeriod: per trip
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
  comparisonRows:
    - label: Emergency medical
      c0: Up to $50k
      c1: Up to $250k
      c2: Up to $1M
    - label: Trip cancellation
      c0: —
      c1: Up to $5k
      c2: Up to $15k
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Medical & cancellation at a glance

Striped comparison sample

Saver

$35

Select

Family

$89

Select

Kids covered free

No
Yes

Rental excess

Optional
Included 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="surface" caption="Striped comparison sample" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Kids covered free",
      "c0": "No",
      "c1": "Yes"
    },
    {
      "label": "Rental excess",
      "c0": "Optional",
      "c1": "Included"
    }
  ]
} eyebrow="" heading="Medical & cancellation at a glance" paddingVertical="3xl" plans={
  [
    {
      "planName": "Saver",
      "price": "$35",
      "pricePeriod": "",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Family",
      "price": "$89",
      "pricePeriod": "",
      "badge": "",
      "featured": true,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "primary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="" variant="striped"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  variant: striped
  eyebrow: ''
  heading: Medical & cancellation at a glance
  subtext: ''
  caption: Striped comparison sample
  plans:
    - planName: Saver
      price: $35
      pricePeriod: ''
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: Family
      price: $89
      pricePeriod: ''
      badge: ''
      featured: true
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: primary
          size: sm
  comparisonRows:
    - label: Kids covered free
      c0: 'No'
      c1: 'Yes'
    - label: Rental excess
      c0: Optional
      c1: Included
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 3xl
---

Two-plan compare

Essentials vs complete

Minimal chrome—focus on limits and what is included.

Minimal style comparison

Essentials

$49 per trip

Choose

Best for gear

Complete

$112 per trip

Choose

Gadget cover

$500
$2,000

Ski pack

Add-on
Included 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="none" caption="Minimal style comparison" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Gadget cover",
      "c0": "$500",
      "c1": "$2,000"
    },
    {
      "label": "Ski pack",
      "c0": "Add-on",
      "c1": "Included"
    }
  ]
} eyebrow="Two-plan compare" heading="Essentials vs complete" paddingVertical="4xl" plans={
  [
    {
      "planName": "Essentials",
      "price": "$49",
      "pricePeriod": "per trip",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Choose",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Complete",
      "price": "$112",
      "pricePeriod": "per trip",
      "badge": "Best for gear",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Choose",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "primary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="Minimal chrome—focus on limits and what is included." variant="minimal"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  variant: minimal
  eyebrow: Two-plan compare
  heading: Essentials vs complete
  subtext: Minimal chrome—focus on limits and what is included.
  caption: Minimal style comparison
  plans:
    - planName: Essentials
      price: $49
      pricePeriod: per trip
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Choose
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: Complete
      price: $112
      pricePeriod: per trip
      badge: Best for gear
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Choose
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: primary
          size: sm
  comparisonRows:
    - label: Gadget cover
      c0: $500
      c1: $2,000
    - label: Ski pack
      c0: Add-on
      c1: Included
  colorScheme: inherit
  backgroundColor: none
  paddingVertical: 4xl
---

Premium tiers

Elevated frame draws attention to plan selection on busy landing pages.

Elevated table

Silver

$62

Select

Popular

Gold

$98

Select

Platinum

$156

Select

Cancel for any reason

—
50%
75%

Adventure sports

—
Add-on
Included 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="base" caption="Elevated table" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Cancel for any reason",
      "c0": "—",
      "c1": "50%",
      "c2": "75%"
    },
    {
      "label": "Adventure sports",
      "c0": "—",
      "c1": "Add-on",
      "c2": "Included"
    }
  ]
} eyebrow="" heading="Premium tiers" paddingVertical="4xl" plans={
  [
    {
      "planName": "Silver",
      "price": "$62",
      "pricePeriod": "",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Gold",
      "price": "$98",
      "pricePeriod": "",
      "badge": "Popular",
      "featured": true,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "primary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "Platinum",
      "price": "$156",
      "pricePeriod": "",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "Select",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="Elevated frame draws attention to plan selection on busy landing pages." variant="elevated"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  variant: elevated
  eyebrow: ''
  heading: Premium tiers
  subtext: Elevated frame draws attention to plan selection on busy landing pages.
  caption: Elevated table
  plans:
    - planName: Silver
      price: $62
      pricePeriod: ''
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: Gold
      price: $98
      pricePeriod: ''
      badge: Popular
      featured: true
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: primary
          size: sm
    - planName: Platinum
      price: $156
      pricePeriod: ''
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: Select
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
  comparisonRows:
    - label: Cancel for any reason
      c0: —
      c1: 50%
      c2: 75%
    - label: Adventure sports
      c0: —
      c1: Add-on
      c2: Included
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 4xl
---

Quick compare

Tighter padding for dense dashboards or embedded widgets.

Compact comparison

A

$28

OK

B

$44

OK

Excess

$100
$75

COVID

Limited
Extended 
---
import PlanComparisonTable from "@features/plan-comparison-table/PlanComparisonTable.astro";
---

<PlanComparisonTable
backgroundColor="surface" caption="Compact comparison" colorScheme="inherit" comparisonRows={
  [
    {
      "label": "Excess",
      "c0": "$100",
      "c1": "$75"
    },
    {
      "label": "COVID",
      "c0": "Limited",
      "c1": "Extended"
    }
  ]
} eyebrow="" heading="Quick compare" paddingVertical="2xl" plans={
  [
    {
      "planName": "A",
      "price": "$28",
      "pricePeriod": "",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "OK",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    },
    {
      "planName": "B",
      "price": "$44",
      "pricePeriod": "",
      "badge": "",
      "featured": false,
      "buttonSections": [
        {
          "_component": "building-blocks/core-elements/button",
          "text": "OK",
          "hideText": false,
          "link": "",
          "iconName": "",
          "iconPosition": "before",
          "variant": "secondary",
          "size": "sm"
        }
      ]
    }
  ]
} subtext="Tighter padding for dense dashboards or embedded widgets." variant="compact"
/>
---
blocks:
  _component: page-sections/features/plan-comparison-table
  variant: compact
  eyebrow: ''
  heading: Quick compare
  subtext: Tighter padding for dense dashboards or embedded widgets.
  caption: Compact comparison
  plans:
    - planName: A
      price: $28
      pricePeriod: ''
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: OK
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
    - planName: B
      price: $44
      pricePeriod: ''
      badge: ''
      featured: false
      buttonSections:
        - _component: building-blocks/core-elements/button
          text: OK
          hideText: false
          link: ''
          iconName: ''
          iconPosition: before
          variant: secondary
          size: sm
  comparisonRows:
    - label: Excess
      c0: $100
      c1: $75
    - label: COVID
      c0: Limited
      c1: Extended
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 2xl
---