Back to site

Insurance Quote Strip

Compact horizontal CTA for getting a travel insurance quote.

Get a personalized quote in minutes

Tell us your destination and dates—we will match you to policies you can buy online.

Start your quote 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="accent" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Start your quote",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" heading="Get a personalized quote in minutes" paddingVertical="2xl" subtext="Tell us your destination and dates—we will match you to policies you can buy online." variant="default"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  heading: Get a personalized quote in minutes
  variant: default
  subtext: Tell us your destination and dates—we will match you to policies you can buy online.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Start your quote
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: accent
  paddingVertical: 2xl
---

Overview

Stacks on small screens and aligns copy with buttons on larger breakpoints—ideal mid-page or before a comparison table. Use variant for centered copy, vertical stacking, flush corners, inset borders, or a softer chroma treatment.

Properties

heading string | default: Get a personalized quote in minutes

Primary message for the quote strip.

variant enum | default: default

Layout and surface style for the strip.

Accepted values:
  • default
  • centered
  • stacked
  • flush
  • bordered
  • subtle

subtext string | default: Tell us your destination and dates—we’ll match you to policies you can buy online.

Supporting line next to or under the heading.

buttonSections array | default: array

Call-to-action buttons (e.g. Get a quote).

colorScheme enum | default: inherit

Color scheme theme for the strip.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: accent

Background color for the strip (accent works well for contrast).

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

paddingVertical enum | default: 2xl

Vertical padding inside the strip.

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

Examples

Strip styles

Get a personalized quote in minutes

Tell us your destination and dates—we will match you to policies you can buy online.

Start your quote 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="accent" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Start your quote",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" heading="Get a personalized quote in minutes" paddingVertical="2xl" subtext="Tell us your destination and dates—we will match you to policies you can buy online." variant="default"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  heading: Get a personalized quote in minutes
  variant: default
  subtext: Tell us your destination and dates—we will match you to policies you can buy online.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Start your quote
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: accent
  paddingVertical: 2xl
---

Ready when you are

Centered layout for narrow columns or modal-style embeds.

Get quote 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="accent" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Get quote",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" heading="Ready when you are" paddingVertical="3xl" subtext="Centered layout for narrow columns or modal-style embeds." variant="centered"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  variant: centered
  heading: Ready when you are
  subtext: Centered layout for narrow columns or modal-style embeds.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Get quote
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: accent
  paddingVertical: 3xl
---

Add travel disruption cover?

Bundle delay and missed connection benefits before checkout.

Yes, add bundle No thanks 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="surface" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Yes, add bundle",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "sm"
    },
    {
      "_component": "building-blocks/core-elements/button",
      "text": "No thanks",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "ghost",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Add travel disruption cover?" paddingVertical="2xl" subtext="Bundle delay and missed connection benefits before checkout." variant="stacked"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  variant: stacked
  heading: Add travel disruption cover?
  subtext: Bundle delay and missed connection benefits before checkout.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Yes, add bundle
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: sm
    - _component: building-blocks/core-elements/button
      text: No thanks
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: ghost
      size: sm
  colorScheme: inherit
  backgroundColor: surface
  paddingVertical: 2xl
---

Continue to payment

Flush edges align with full-bleed sections or edge-to-edge grids.

Continue 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="highlight" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Continue",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "md"
    }
  ]
} colorScheme="inherit" heading="Continue to payment" paddingVertical="xl" subtext="Flush edges align with full-bleed sections or edge-to-edge grids." variant="flush"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  variant: flush
  heading: Continue to payment
  subtext: Flush edges align with full-bleed sections or edge-to-edge grids.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Continue
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: md
  colorScheme: inherit
  backgroundColor: highlight
  paddingVertical: xl
---

Save this quote

Email a copy—rates may change if you leave and return later.

Email quote 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="base" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Email quote",
      "hideText": false,
      "link": "",
      "iconName": "envelope",
      "iconPosition": "before",
      "variant": "secondary",
      "size": "md"
    }
  ]
} colorScheme="inherit" heading="Save this quote" paddingVertical="2xl" subtext="Email a copy—rates may change if you leave and return later." variant="bordered"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  variant: bordered
  heading: Save this quote
  subtext: Email a copy—rates may change if you leave and return later.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Email quote
      hideText: false
      link: ''
      iconName: envelope
      iconPosition: before
      variant: secondary
      size: md
  colorScheme: inherit
  backgroundColor: base
  paddingVertical: 2xl
---

Optional rental car excess

Slightly muted strip for secondary upsells below the main quote.

Add excess cover 
---
import Button from "@core-elements/button/Button.astro";
import InsuranceQuoteStrip from "@page-sections/ctas/insurance-quote-strip/InsuranceQuoteStrip.astro";
---

<InsuranceQuoteStrip
backgroundColor="accent" buttonSections={
  [
    {
      "_component": "building-blocks/core-elements/button",
      "text": "Add excess cover",
      "hideText": false,
      "link": "",
      "iconName": "",
      "iconPosition": "before",
      "variant": "primary",
      "size": "sm"
    }
  ]
} colorScheme="inherit" heading="Optional rental car excess" paddingVertical="lg" subtext="Slightly muted strip for secondary upsells below the main quote." variant="subtle"
/>
---
blocks:
  _component: page-sections/ctas/insurance-quote-strip
  variant: subtle
  heading: Optional rental car excess
  subtext: Slightly muted strip for secondary upsells below the main quote.
  buttonSections:
    - _component: building-blocks/core-elements/button
      text: Add excess cover
      hideText: false
      link: ''
      iconName: ''
      iconPosition: before
      variant: primary
      size: sm
  colorScheme: inherit
  backgroundColor: accent
  paddingVertical: lg
---