Policy Card

Displays an insurance policy with coverage details, premium, and status.

Preview · Policy Card

Code

HTML · @primus/ui-core

<div class="card" style="max-width:300px;padding:1.25rem">
  <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.75rem">
    <div><p style="margin:0;font-weight:600;font-size:0.875rem">Auto Insurance</p><p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">POL-2026-00142</p></div>
    <span class="badge success">Active</span>
  </div>
  <div style="display:flex;flex-direction:column;gap:0.5rem;font-size:0.8rem">
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Coverage</span><span style="font-weight:500">$250,000</span></div>
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Monthly Premium</span><span style="font-weight:500">$120.00</span></div>
    <div style="display:flex;justify-content:space-between"><span style="color:var(--muted-foreground)">Next Payment</span><span style="font-weight:500">Apr 1, 2026</span></div>
  </div>
</div>

React

import { PrimusPolicyCard } from '@/components/ui/primus-policy-card';

<PrimusPolicyCard
  policy={{
    id: 'pol-1',
    policyNumber: 'POL-2026-00142',
    type: 'auto',
    status: 'active',
    premium: 120,
    coverageAmount: 250000,
    startDate: '2026-01-01',
    endDate: '2026-12-31',
    holder: 'Jane Doe',
  }}
  onViewDetails={(p) => console.log(p)}
  onFileClaim={(p) => console.log('File claim for', p.policyNumber)}
  onRenew={(p) => console.log('Renew', p.policyNumber)}
/>

Angular

<primus-policy-card policyNumber="POL-2026-00142" type="Auto Insurance"
  status="active" [coverageAmount]="250000" [premiumAmount]="120">
</primus-policy-card>

Props

Prop	Type	Default	Description
policy	Policy	required	Policy data to display
currency	string	'USD'	Currency for premium and coverage display
onViewDetails	(policy: Policy) => void	—	View policy details
onFileClaim	(policy: Policy) => void	—	File a claim against this policy
onRenew	(policy: Policy) => void	—	Renew the policy

TypeScript interfaces

interface Policy {
  id:             string;
  policyNumber:   string;
  type:           'auto' | 'home' | 'life' | 'health' | 'travel';
  status:         'active' | 'expired' | 'pending' | 'cancelled';
  premium:        number;   // Monthly premium amount
  coverageAmount: number;
  startDate:      string;   // ISO 8601
  endDate:        string;   // ISO 8601
  holder:         string;   // Policyholder name
}

Version history

See the Changelog for version history and breaking changes.