Quote Comparison

Side-by-side comparison of insurance quotes from multiple providers.

Preview · Quote Comparison

Code

HTML · @primus/ui-core

<div class="hstack" style="flex-wrap:wrap;align-items:stretch">
  <div class="card" style="flex:1;min-width:130px;padding:1rem;text-align:center">
    <p style="margin:0 0 0.25rem;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-foreground)">Basic</p>
    <p style="margin:0 0 0.5rem;font-size:1.4rem;font-weight:700">$89<span style="font-size:0.8rem;font-weight:400">/mo</span></p>
    <span class="badge secondary">Standard</span>
  </div>
  <div class="card" style="flex:1;min-width:130px;padding:1rem;text-align:center;border-color:var(--primary)">
    <p style="margin:0 0 0.25rem;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--primary)">Pro ✦</p>
    <p style="margin:0 0 0.5rem;font-size:1.4rem;font-weight:700">$149<span style="font-size:0.8rem;font-weight:400">/mo</span></p>
    <span class="badge accent">Recommended</span>
  </div>
  <div class="card" style="flex:1;min-width:130px;padding:1rem;text-align:center">
    <p style="margin:0 0 0.25rem;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-foreground)">Premium</p>
    <p style="margin:0 0 0.5rem;font-size:1.4rem;font-weight:700">$299<span style="font-size:0.8rem;font-weight:400">/mo</span></p>
    <span class="badge secondary">Comprehensive</span>
  </div>
</div>

React

import { PrimusQuoteWizard } from '@/components/ui/primus-quote-wizard';

<PrimusQuoteWizard
  insuranceType="auto"
  onComplete={(data) => console.log('Quote complete', data)}
  onCancel={() => console.log('Cancelled')}
/>

Angular

<primus-quote-comparison [quotes]="quotes"></primus-quote-comparison>

Props

Prop	Type	Default	Description
insuranceType	'auto' | 'home' | 'life' | 'health'	required	Configures questions and quote flow
onComplete	(data: any) => void	—	Called when the quote wizard completes
onCancel	() => void	—	Called when the user cancels

Version history

See the Changelog for version history and breaking changes.