# Policy Card

> One insurance policy: type and insurer, sum insured, premium, deductible, policy number, renewal date and status (active, pending, expiring, lapsed), with room for actions.

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/PolicyCard/)

One insurance policy: type and insurer, sum insured, premium, deductible, policy number, renewal
date and status (active, pending, expiring, lapsed), with room for actions.

- `maskNumber` shows only the last four characters of the policy number.

## Example

```tsx
import type * as React from "react";
import { Button, PolicyCard } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <div
      className="tf-grid"
      style={
        {
          "--cols": "repeat(2, minmax(0, 1fr))",
          "--cols-sm": "1fr",
          gap: 16,
        } as React.CSSProperties
      }
    >
      <PolicyCard
        type="Household contents"
        insurer="Nordhafen Insurance"
        icon="home"
        tint="sky"
        coverage={65000}
        premium={{ amount: 9.8, period: "month" }}
        deductible={150}
        policyNumber="HR-2207-551938"
        maskNumber
        renews={new Date(2027, 2, 1)}
        actions={
          <>
            <Button size="sm" variant="ghost" icon="file">
              Documents
            </Button>
            <Button size="sm" variant="secondary">
              Report a claim
            </Button>
          </>
        }
      />
      <PolicyCard
        type="Car (comprehensive)"
        insurer="Alpenland Direct"
        icon="key"
        tint="butter"
        coverage="Unlimited liability"
        premium={{ amount: 412, period: "year" }}
        deductible={300}
        status="expiring"
        renews={new Date(2026, 11, 31)}
      />
    </div>
  );
}
```

## Props

### PolicyCard

| Prop | Type | Notes |
| --- | --- | --- |
| `surface?` | `Surface` | `"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`. |
| `type` | `string` | The kind of insurance: "Household contents", "Liability" … |
| `insurer` | `string` | Required |
| `icon?` | `IconName` |  |
| `tint?` | `Tint` |  |
| `policyNumber?` | `string` |  |
| `maskNumber?` | `boolean` | Show only the last four characters of the policy number. |
| `coverage?` | `number \| ReactNode` | Sum insured: a number (money) or text ("unlimited"). |
| `premium?` | `{ amount: number; period: "month" \| "quarter" \| "year" }` |  |
| `deductible?` | `number` |  |
| `renews?` | `Date \| string \| number` |  |
| `status?` | `"active" \| "pending" \| "expiring" \| "lapsed"` |  |
| `currency?` | `string` |  |
| `actions?` | `ReactNode` | Buttons at the foot (documents, report a claim …). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |