Skip to content
Twentyfirst UIPro

Policy Card

Life · PolicyCard, Button

View as Markdown

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.
Household contentsNordhafen Insurance
Active
Sum insured
€65,000
month
€9.80
Deductible
€150
Policy no.
•••• 1938
Renews Mar 1, 2027
Car (comprehensive)Alpenland Direct
Expiring
Sum insured
Unlimited liability
year
€412
Deductible
€300
Renews Dec 31, 2026

Props

PolicyCard

PropTypeNotes
surface?Surface`"glass"`: translucent glass over a backdrop (`Ambient`, a photo, a map); `"solid"` opts out inside a glass `UIProvider`.
typestringThe kind of insurance: "Household contents", "Liability" …
insurerstringRequired
icon?IconName
tint?Tint
policyNumber?string
maskNumber?booleanShow only the last four characters of the policy number.
coverage?number | ReactNodeSum 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?ReactNodeButtons at the foot (documents, report a claim …).
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Button

PropTypeNotes
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?booleanRender the single child element (a link, a router Link) with the button's look instead of a <button>.
id?string
name?stringForm field name and value, sent with the form when this button submits it.
value?string
form?stringThe 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?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.