Insurance patterns

Quotation layout

A responsive review screen that keeps travel details and price visible before the next step.

Usage & approach

This screen uses fictional amounts and plan details to establish visual hierarchy. It does not define pricing, taxes, eligibility, or insurer mappings. Confirm all business behavior against the owning IFRC application. A single-column mobile flow keeps the summary after the details.

Specifications

Layout: grid gap-6 lg:grid-cols-[1fr_320px]
Review fields: dl grid grid-cols-1 gap-6 sm:grid-cols-2
Summary: Self-contained surface with tabular-nums totals.
Progress: An ordered list with aria-current="step".

Review a quotation

Desktop uses a summary sidebar; tablet and mobile stack it below the details. Sample content only.

<div class="space-y-6">
  <ol aria-label="Quotation progress" class="flex flex-wrap gap-4 text-xs text-[#333] dark:text-[#c4c7c5]"><li>1. Trip details</li><li>2. Choose plan</li><li aria-current="step" class="font-semibold text-[#006838] dark:text-[#f4f5f2]">3. Review quotation</li></ol>
  <div class="grid gap-6 lg:grid-cols-[1fr_320px]">
    <section class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><h2 class="text-xl font-semibold">Review your trip</h2><dl class="mt-6 grid gap-6 sm:grid-cols-2"><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Destination</dt><dd class="mt-2 text-sm font-medium">Japan</dd></div><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Duration</dt><dd class="mt-2 text-sm font-medium">7 days</dd></div><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Plan</dt><dd class="mt-2 text-sm font-medium">Travel Essential</dd></div><div><dt class="text-xs text-[#333] dark:text-[#c4c7c5]">Travellers</dt><dd class="mt-2 text-sm font-medium">1 adult</dd></div></dl></section>
    <aside class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]"><h2 class="font-semibold">Quotation summary</h2><p class="mt-4 text-sm text-[#333] dark:text-[#c4c7c5]">Illustrative premium</p><p class="mt-2 text-3xl font-semibold tabular-nums">₱1,250.00</p><button type="button" class="mt-6 w-full inline-flex min-h-11 items-center justify-center rounded-md bg-[#006838] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#00552e] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#006838] dark:bg-[#006838] dark:text-white dark:hover:bg-[#00552e] dark:focus-visible:outline-[#006838] disabled:cursor-not-allowed disabled:opacity-50">Continue</button><p class="mt-3 text-xs leading-5 text-[#808080] dark:text-[#b2b7b4]">Sample pricing. No quotation is created.</p></aside>
  </div>
</div>

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.