Quote Comparison
Side-by-side comparison of insurance quotes from multiple providers.
Code
- HTML · @primus/ui-core
- React
- Angular
<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>
import { QuoteComparison } from 'primus-react-ui';
<QuoteComparison apiUrl="https://api.yourdomain.com" />
<primus-quote-comparison [quotes]="quotes"></primus-quote-comparison>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
apiUrl | string | — | API base URL |
quotes | Quote[] | — | Quote list (Angular) |
TypeScript interfaces
interface InsuranceQuote {
id: string;
planName: string;
monthlyPremium: number;
annualPremium: number;
coverageAmount: number;
features: string[];
recommended?: boolean;
}
Events
| Event | Type | Description |
|---|---|---|
onSelect / (onSelect) | (quote: InsuranceQuote) => void | Plan selected |
Version history
See the Changelog for version history and breaking changes.