Back to site

Insurance Quote Strip

No description available

---
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

No properties available. Make sure the component has a valid .cloudcannon.structure-value.yml file.

Examples

Strip styles

---
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
---
---
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
---
---
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
---
---
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
---
---
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
---
---
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
---