QuoteBox
Travel insurance quote box with the full interactive quote form.
---
import QuoteBox from "@page-sections/ctas/quote-box/QuoteBox.astro";
---
<QuoteBox backgroundColor="surface" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-box
colorScheme: inherit
backgroundColor: surface
paddingVertical: 4xl
---Overview
Use QuoteBox when you want to embed the richer travel insurance quote UI as a page section rather than assembling individual fields by hand. The Astro wrapper currently exposes the section-level presentation props only: colorScheme, backgroundColor, and paddingVertical. The form itself handles trip type, destination, dates, age, dependants, and optional add-ons internally.
Properties
colorScheme enum | default: inherit
Color scheme theme for the quote box wrapper.
Accepted values:
-
inherit -
light -
dark
backgroundColor enum | default: surface
Background color for the quote box section.
Accepted values:
-
none -
base -
surface -
accent -
highlight
paddingVertical enum | default: 4xl
Vertical spacing inside the quote box section.
Accepted values:
-
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl -
5xl -
6xl
Examples
Wrapper Styles
---
import QuoteBox from "@page-sections/ctas/quote-box/QuoteBox.astro";
---
<QuoteBox backgroundColor="surface" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-box
colorScheme: inherit
backgroundColor: surface
paddingVertical: 4xl
------
import QuoteBox from "@page-sections/ctas/quote-box/QuoteBox.astro";
---
<QuoteBox backgroundColor="accent" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-box
colorScheme: inherit
backgroundColor: accent
paddingVertical: 4xl
------
import QuoteBox from "@page-sections/ctas/quote-box/QuoteBox.astro";
---
<QuoteBox backgroundColor="surface" colorScheme="dark" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-box
colorScheme: dark
backgroundColor: surface
paddingVertical: 4xl
---