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 { PolicyCard } from 'primus-react-ui';

<PolicyCard policyNumber="POL-2026-00142" type="Auto Insurance"
  status="active" coverageAmount={250000} premiumAmount={120}
  nextPaymentDate="2026-04-01" />

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
policyNumber	string	—	Policy ID
type	string	—	Policy type
status	active | expired | pending	—	Status
coverageAmount	number	—	Coverage limit
premiumAmount	number	—	Monthly premium

TypeScript interfaces

interface PolicyCardData {
  policyNumber:    string;
  type:            string;   // e.g. 'Auto Insurance'
  status:          'active' | 'expired' | 'pending' | 'cancelled';
  coverageAmount:  number;
  premiumAmount:   number;
  nextPaymentDate: string | Date;
  startDate:       string | Date;
  endDate:         string | Date;
}

Version history

See the Changelog for version history and breaking changes.