Invoice Paid

A payment confirmation card closes a transaction with certainty. A success icon leads, the amount and reference details confirm what happened, and stacked actions like viewing the receipt or returning home give users somewhere to go next. Payment flows, order pages, and billing screens all end on a note like this.

<div class="card">
  <div
    class="card-content flex flex-col items-center gap-4 text-center text-balance"
  >
    <div
      class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-check size-6"
        aria-hidden="true"
      >
        <path d="M20 6 9 17l-5-5"></path>
      </svg>
    </div>
    <div class="flex max-w-sm flex-col items-center gap-1">
      <div class="text-lg font-medium tracking-tight">Invoice paid</div>
      <div class="text-sm/relaxed text-muted-foreground">
        You paid $17,975.30. A receipt copy was sent to [email protected].
      </div>
    </div>
    <div class="flex w-full flex-col gap-3">
      <button type="button" class="btn w-full">Next invoice</button
      ><button type="button" class="btn btn-outline w-full">Done</button>
    </div>
  </div>
</div>

Browse more card examples.