Insurance patterns
Policy summary
Make reference numbers, coverage dates, and issuance state easy to find and distinguish.
Usage & approach
Show issued or active only when the owning system confirms that state. A payment confirmation does not itself prove policy issuance. Document availability and download permissions belong to the host application. These references use synthetic data.
Specifications
- Reference
- font-mono text-sm break-all
- Dates
- text-sm font-medium; explicit readable dates
- Layout
- grid gap-6 sm:grid-cols-2
- Status
- Visible label alongside color.
Issued policy appearance
A sample overview with a reference, coverage period, and labelled status.
<article class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]">
<div class="flex flex-wrap items-start justify-between gap-4"><div><p class="text-sm text-[#333] dark:text-[#c4c7c5]">Policy overview</p><h2 class="mt-2 text-2xl font-semibold">Travel Essential</h2></div><span class="rounded-md bg-[#f1f2f0] px-3 py-1 text-xs font-medium text-[#006838] dark:bg-[#303232] dark:text-[#f4f5f2]">Issued · sample</span></div>
<dl class="mt-8 grid gap-6 sm:grid-cols-2"><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Policy reference</dt><dd class="mt-2 break-all font-mono text-sm">OI-DEMO-0001</dd></div><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Coverage period</dt><dd class="mt-2 text-sm font-medium">01 Nov 2026 – 07 Nov 2026</dd></div></dl>
<p class="mt-8 border-t border-[#dfe7df] pt-4 text-xs leading-6 text-[#808080] dark:border-[#3d4140] dark:text-[#b2b7b4]">Visual sample only. Refer to the issued policy for approved terms and coverage.</p>
</article>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.