# Coverage Matrix

> Life risks and whether a policy covers them: covered, partly or not covered, with the policy and a note, and a count of each above the table.

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

Life risks and whether a policy covers them: covered, partly or not covered, with the policy and a
note, and a count of each above the table. Status is a shape and a word, never colour alone.

## Example

```tsx
import { CoverageMatrix, Panel } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <Panel title="Are we covered?" subtitle="Your household, 6 risks" style={{ maxWidth: 720 }}>
      <CoverageMatrix
        rows={[
          {
            id: "liab",
            risk: "Damage to others",
            status: "covered",
            policy: "Personal liability",
            note: "Up to €10 m, family included",
          },
          {
            id: "home",
            risk: "Burglary and fire at home",
            status: "covered",
            policy: "Household contents",
          },
          {
            id: "bike",
            risk: "Bike theft",
            status: "partial",
            policy: "Household contents",
            note: "Only up to €1,000; the e-bike is worth €3,200",
          },
          {
            id: "work",
            risk: "Unable to work",
            status: "none",
            note: "The biggest gap for a family with one income",
          },
          {
            id: "legal",
            risk: "Legal costs",
            status: "partial",
            policy: "Legal protection",
            note: "Traffic only",
          },
          { id: "travel", risk: "Illness abroad", status: "covered", policy: "Travel health" },
        ]}
      />
    </Panel>
  );
}
```

## Props

### CoverageMatrix

| Prop | Type | Notes |
| --- | --- | --- |
| `rows` | `CoverageRow[]` | Required |
| `label?` | `string` | Accessible name and caption (default "Coverage"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Panel

| Prop | Type | Notes |
| --- | --- | --- |
| `side?` | `boolean` |  |
| `title?` | `string` |  |
| `subtitle?` | `string` |  |
| `action?` | `ReactNode` |  |
| `children?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |