Quote Results
Travel insurance quote results table with sortable provider comparison rows.
Compare cover, price, and provider value in one place.
A cleaner results board surfaces the strongest options first, then lets visitors sort deeper into cover limits and special offers without the page feeling like a spreadsheet.
---
import QuoteResults from "@page-sections/ctas/quote-results/QuoteResults.astro";
---
<QuoteResults backgroundColor="surface" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-results
colorScheme: inherit
backgroundColor: surface
paddingVertical: 4xl
---Overview
Use Quote Results after a quote request has populated the store with provider responses. The Astro wrapper currently exposes the section-level presentation props only: colorScheme, backgroundColor, and paddingVertical. The table itself reads quote data from the quote store and renders mobile card and desktop table layouts.
Properties
colorScheme enum | default: inherit
Color scheme theme for the quote results wrapper.
-
inherit -
light -
dark
backgroundColor enum | default: surface
Background color for the quote results section.
-
none -
base -
surface -
accent -
highlight
paddingVertical enum | default: 4xl
Vertical spacing inside the quote results section.
-
xs -
sm -
md -
lg -
xl -
2xl -
3xl -
4xl -
5xl -
6xl
Examples
Wrapper Styles
Compare cover, price, and provider value in one place.
A cleaner results board surfaces the strongest options first, then lets visitors sort deeper into cover limits and special offers without the page feeling like a spreadsheet.
---
import QuoteResults from "@page-sections/ctas/quote-results/QuoteResults.astro";
---
<QuoteResults backgroundColor="surface" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-results
colorScheme: inherit
backgroundColor: surface
paddingVertical: 4xl
---Compare cover, price, and provider value in one place.
A cleaner results board surfaces the strongest options first, then lets visitors sort deeper into cover limits and special offers without the page feeling like a spreadsheet.
---
import QuoteResults from "@page-sections/ctas/quote-results/QuoteResults.astro";
---
<QuoteResults backgroundColor="accent" colorScheme="inherit" paddingVertical="4xl" />---
blocks:
_component: page-sections/ctas/quote-results
colorScheme: inherit
backgroundColor: accent
paddingVertical: 4xl
---Compare cover, price, and provider value in one place.
A cleaner results board surfaces the strongest options first, then lets visitors sort deeper into cover limits and special offers without the page feeling like a spreadsheet.
---
import QuoteResults from "@page-sections/ctas/quote-results/QuoteResults.astro";
---
<QuoteResults backgroundColor="surface" colorScheme="dark" paddingVertical="5xl" />---
blocks:
_component: page-sections/ctas/quote-results
colorScheme: dark
backgroundColor: surface
paddingVertical: 5xl
---