Tailwind CSS Invoice Layouts Blocks

Invoice Layouts

Invoice layouts with expandable invoice records, compact invoice pages, and carded invoice views for billing, payments, and admin products.

Expandable Invoice List Item Card with Status Actions Pro

Expandable invoice list item card reveals billing, sender, bank, due-date, and action details from a compact summary row.

Create a responsive UI block named "Expandable Invoice List Item Card with Status Actions" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/billing-and-payments/invoice-layouts/#expandable-invoice-list-item-card-with-status-actions. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: billing-and-payments/invoice-layouts
- Block ID: expandable-invoice-list-item-card-with-status-actions
- Source description: Expandable invoice list item card reveals billing, sender, bank, due-date, and action details from a compact summary row.
- Preview iframe: https://preline.co/blocks/billing-and-payments/invoice-layouts/iframes/pro/expandable-invoice-list-item-card-with-status-actions.html (repo path: blocks/billing-and-payments/invoice-layouts/iframes/pro/expandable-invoice-list-item-card-with-status-actions.html)
- Source markup reference:
  - partials/pro/crm-dashboard/sources/invoices-list-item.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Card: `p-4 bg-card border border-card-line rounded-xl shadow-2xs`; the demo iframe constrains it with body `w-full max-w-5xl mx-auto`. Summary/detail rows use `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6`.
  - Summary row: title `Invoice for BlueVista Innovations` over a primary text button `INV-0002` with an invoice icon; `Invoice date:` `April 5, 2025`; `Total amount:` `$1,000.00`.
  - Always-visible second grid: `Description:` with an em dash placeholder, `Due date:` `April 10, 2025`, and the status column.
  - Demo status is `Overdue` (red badge with alert-triangle icon); the source also defines `Paid` (green check), `Unpaid` (orange x), and `Pending` (surface clock) badge variants, and non-Paid statuses additionally render small layer buttons `Resend` and `Cancel` under the badge.
  - Collapsed-by-default detail region uses Preline HSCollapse: region has `hs-collapse hidden ... transition-[height] duration-300` and `role="region"`, toggled by a footer button with `data-hs-collapse`, `aria-expanded="false"`, and `aria-controls`; the toggle swaps `View details` / `Hide details` labels and chevron icons via `hs-collapse-open:` variants.
  - Expanded details: `Bill to:` `Preline Labs Ltd.` (`500 Technology Dr, San Francisco, CA 94107, United States`, link `support@site.com`); `Sender address:` `BlueVista Innovations` (`4222 River Rd, New York, NY 31904, United States`, `+1 212-555-1212`, link `hello@bluevista.com`).
  - Expanded bank column, 4 pairs in order: `Bank name:` `Bank of America`, `Account holder name:` `John Doe`, `Bank routing number:` `3482343-02`, `Bank account number:` `203979120523904`.
  - Card footer: text buttons `Download`, `Archive`, `Delete` separated by `before:` vertical rules on the left, with the View/Hide details toggle right-aligned across a `border-t border-card-footer` divider.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="p-4 bg-card border border-card-line rounded-xl shadow-2xs">
      
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6">
        
        <div class="flex flex-col gap-y-0.5">
          <span class="block font-medium text-foreground">
            Invoice for BlueVista Innovations
          </span>

<div class="flex flex-col gap-y-0.5">
          <div class="text-sm text-muted-foreground-1">
            Invoice date:
          </div>

<p class="text-sm text-foreground">
            April 5, 2025
          </p>
        </div>

<div class="flex flex-col gap-y-0.5">
          <div class="text-sm text-muted-foreground-1">
            Total amount:
          </div>

<p class="text-sm text-foreground">
                <span class="block font-medium">
                  Preline Labs Ltd.
                </span>
                <span class="block">
                  500 Technology Dr, San Francisco, CA 94107, United States
                </span>
                <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                  support@site.com
                </a>
              </p>
            </div>

<div class="flex flex-col gap-y-4">
              <div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Sender address:
                </div>

<p class="text-sm text-foreground">
                  <span class="block font-medium">
                    BlueVista Innovations
                  </span>
                  <span class="block">
                    4222 River Rd, New York, NY 31904, United States
                  </span>
                  <span class="block">
                    +1 212-555-1212
                  </span>
                  <a class="text-sm text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" href="#">
                    hello@bluevista.com
                  </a>
                </p>
              </div>
            </div>

<div class="flex flex-col gap-y-2">
              <div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank name:
                </div>
    
                <p class="text-sm text-foreground">
                  Bank of America
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Account holder name:
                </div>
    
                <p class="text-sm text-foreground">
                  John Doe
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank routing number:
                </div>
    
                <p class="text-sm text-foreground">
                  3482343-02
                </p>
              </div>

<div class="flex flex-col gap-y-0.5">
                <div class="text-sm text-muted-foreground-1">
                  Bank account number:
                </div>
    
                <p class="text-sm text-foreground">
                  203979120523904
                </p>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>

<div class="mt-4">
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-6">
          <div class="flex flex-col gap-y-0.5">
            <div class="text-sm text-muted-foreground-1">
              Description:
            </div>

<div class="flex flex-col gap-y-0.5">
            <div class="text-sm text-muted-foreground-1">
              Due date:
            </div>

<p class="text-sm text-foreground">
              April 10, 2025
            </p>
          </div>

<div class="flex flex-col gap-y-1.5">
            <div>
              <span class="py-1 px-2 inline-flex items-center gap-x-1 bg-red-100 text-red-800 text-nowrap text-xs rounded-md dark:bg-red-500/10 dark:text-red-400">
                <svg class="shrink-0 size-3.5" 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"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                Overdue
              </span>

<div class="mt-2 flex flex-wrap gap-1">
                <div>
                  
                  <button type="button" class="py-1 px-2 inline-flex items-center gap-x-2 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                    <svg class="shrink-0 size-3.5" 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"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
                    Resend
                  </button>
                  
                </div>
            
                <div>
                  
                  <button type="button" class="py-1 px-2 inline-flex items-center gap-x-2 text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                    <svg class="shrink-0 size-3.5" 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                    Cancel
                  </button>
                  
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
      </div>

<div class="pt-3 mt-4 border-t border-card-footer">
        <div class="flex flex-wrap justify-between gap-2">
          
          <ul class="flex flex-wrap items-center gap-3">
            
            <li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
                Download
              </button>
            </li>

<li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>
                Archive
              </button>
            </li>

<li class="relative ps-3 first:ps-0 first:before:hidden before:absolute before:top-1/2 before:inset-s-0 before:h-1/2 before:border-s before:border-line-2 before:-translate-y-1/2">
              <button type="button" class="inline-flex items-center gap-1.5 text-[13px] text-muted-foreground-2 decoration-2 hover:underline focus:outline-hidden focus:underline">
                <svg class="shrink-0 size-3.5" 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"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                Delete
              </button>
            </li>
            
          </ul>

<button type="button" class="hs-collapse-toggle inline-flex justify-center items-center gap-x-1 text-[13px] text-primary decoration-2 hover:underline focus:outline-hidden focus:underline" id="hs-pro-cilishm1" aria-expanded="false" aria-controls="hs-pro-cilishm1-button" data-hs-collapse="#hs-pro-cilishm1-button">
            <span class="hs-collapse-open:hidden">View details</span>
            <svg class="hs-collapse-open:hidden shrink-0 size-3.5" 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"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
            <span class="hs-collapse-open:block hidden">Hide details</span>
            <svg class="hs-collapse-open:block hidden shrink-0 size-3.5" 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"><path d="m7 20 5-5 5 5"/><path d="m7 4 5 5 5-5"/></svg>
          </button>
        </div>
      </div>
      
    </div>

Open related CRM customer invoices page

Compact Invoice Page with Detail Grid and Totals Free

Compact invoice page uses a full-width billing grid, line-item table, totals block, and print or download header actions.

Create a responsive UI block named "Compact Invoice Page with Detail Grid and Totals" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/billing-and-payments/invoice-layouts/#compact-invoice-page-with-detail-grid-and-totals. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: billing-and-payments/invoice-layouts
- Block ID: compact-invoice-page-with-detail-grid-and-totals
- Source description: Compact invoice page uses a full-width billing grid, line-item table, totals block, and print or download header actions.
- Preview iframe: https://preline.co/blocks/billing-and-payments/invoice-layouts/iframes/free/compact-invoice-page-with-detail-grid-and-totals.html (repo path: blocks/billing-and-payments/invoice-layouts/iframes/free/compact-invoice-page-with-detail-grid-and-totals.html)
- Source markup reference:
  - partials/blocks/sources/pages/ai-simple-and-compact.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - No card panel: content sits directly in a `max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10` wrapper; the header row (`Invoice` heading + actions) is separated by `mb-5 pb-5 ... border-b border-line-2`.
  - Header actions: `Invoice PDF` (layer-style link with download icon) and `Print` (primary link with printer icon).
  - Detail grid `grid md:grid-cols-2 gap-3` of dl rows with `min-w-36 max-w-50` labels. Left column: `Billed to:` with primary link `sara@site.com`, then `Billing details:` and `Shipping details:` both `Sara Williams` + `280 Suzanne Throughway, / Breannabury, OR 45801, / United States`.
  - Right column dl rows: `Invoice number:` `ADUQ2189H1-0038`, `Currency:` `USD - US Dollar`, `Due date:` `10 Jan 2023`, `Billing method:` `Send invoice`.
  - Line items are CSS grids, not a `<table>`: uppercase headers `Item` / `Qty` / `Rate` / `Amount` are `hidden sm:grid`, and each cell repeats its own `sm:hidden` label on mobile; 3 rows: `Design UX and UI` qty 1 rate 5 `$500`, `Web project` qty 1 rate 24 `$1250`, `SEO` qty 1 rate 6 `$2000`.
  - Totals stack of 5 dl rows in order: `Subotal:` (source spells it without the second t) `$2750.00`, `Total:` `$2750.00`, `Tax:` `$39.00`, `Amount paid:` `$2789.00`, `Due balance:` `$0.00`.
  - The block is static: no data-hs-* attributes or Preline plugin wiring.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
        
        <div class="mb-5 pb-5 flex justify-between items-center border-b border-line-2">
          <div>
            <h2 class="text-2xl font-semibold text-foreground">Invoice</h2>
          </div>

<div class="inline-flex gap-x-2">
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
            <svg class="shrink-0 size-4" 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
              Invoice PDF
            </a>
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              <svg class="shrink-0 size-4" 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"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
              Print
            </a>
          </div>
          
        </div>

<div class="grid md:grid-cols-2 gap-3">
          <div>
            <div class="grid space-y-3">
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billed to:
                </dt>
                <dd class="text-foreground">
                  <a class="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline focus:outline-hidden focus:underline font-medium" href="#">
                    sara@site.com
                  </a>
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billing details:
                </dt>
                <dd class="font-medium text-foreground">
                  <span class="block font-semibold">Sara Williams</span>
                  <address class="not-italic font-normal">
                    280 Suzanne Throughway,<br>
                    Breannabury, OR 45801,<br>
                    United States<br>
                  </address>
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Shipping details:
                </dt>
                <dd class="font-medium text-foreground">
                  <span class="block font-semibold">Sara Williams</span>
                  <address class="not-italic font-normal">
                    280 Suzanne Throughway,<br>
                    Breannabury, OR 45801,<br>
                    United States<br>
                  </address>
                </dd>
              </dl>
            </div>
          </div>

<div>
            <div class="grid space-y-3">
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Invoice number:
                </dt>
                <dd class="font-medium text-foreground">
                  ADUQ2189H1-0038
                </dd>
              </dl>

<dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Currency:
                </dt>
                <dd class="font-medium text-foreground">
                  USD - US Dollar
                </dd>
              </dl>
        
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Due date:
                </dt>
                <dd class="font-medium text-foreground">
                  10 Jan 2023
                </dd>
              </dl>
        
              <dl class="flex flex-col sm:flex-row gap-x-3 text-sm">
                <dt class="min-w-36 max-w-50 text-muted-foreground-1">
                  Billing method:
                </dt>
                <dd class="font-medium text-foreground">
                  Send invoice
                </dd>
              </dl>
            </div>
          </div>
          
        </div>

<div class="mt-6 border border-line-2 p-4 rounded-lg space-y-4">
          <div class="hidden sm:grid sm:grid-cols-5">
            <div class="sm:col-span-2 text-xs font-medium text-muted-foreground-1 uppercase">Item</div>
            <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Qty</div>
            <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Rate</div>
            <div class="text-end text-xs font-medium text-muted-foreground-1 uppercase">Amount</div>
          </div>

<div class="hidden sm:block border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">Design UX and UI</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">5</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$500</p>
            </div>
          </div>

<div class="sm:hidden border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">Web project</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">24</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$1250</p>
            </div>
          </div>

<div class="sm:hidden border-b border-line-2"></div>
    
          <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
            <div class="col-span-full sm:col-span-2">
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
              <p class="font-medium text-foreground">SEO</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
              <p class="text-foreground">1</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
              <p class="text-foreground">6</p>
            </div>
            <div>
              <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
              <p class="sm:text-end text-foreground">$2000</p>
            </div>
          </div>
        </div>

<div class="mt-8 flex sm:justify-end">
          <div class="w-full max-w-2xl sm:text-end space-y-2">
            
            <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
              <dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Subotal:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2750.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Total:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2750.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Amount paid:</dt>
                <dd class="col-span-2 font-medium text-foreground">$2789.00</dd>
              </dl>

<dl class="grid sm:grid-cols-5 gap-x-3 text-sm">
                <dt class="col-span-3 text-muted-foreground-1">Due balance:</dt>
                <dd class="col-span-2 font-medium text-foreground">$0.00</dd>
              </dl>
            </div>
            
          </div>
        </div>
        
      </div>

Carded Invoice Page with Header Actions and Totals Free

Carded invoice page wraps company header, billing details, line-item table, totals, and footer actions inside a centered panel.

Create a responsive UI block named "Carded Invoice Page with Header Actions and Totals" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/billing-and-payments/invoice-layouts/#carded-invoice-page-with-header-actions-and-totals. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: billing-and-payments/invoice-layouts
- Block ID: carded-invoice-page-with-header-actions-and-totals
- Source description: Carded invoice page wraps company header, billing details, line-item table, totals, and footer actions inside a centered panel.
- Preview iframe: https://preline.co/blocks/billing-and-payments/invoice-layouts/iframes/free/carded-invoice-page-with-header-actions-and-totals.html (repo path: blocks/billing-and-payments/invoice-layouts/iframes/free/carded-invoice-page-with-header-actions-and-totals.html)
- Source markup reference:
  - partials/blocks/sources/pages/invoice.html

Block-specific fidelity rules:
- For headers, navbars, sidebars, tabs, and app chrome, separate source demo wrapper width from the destination app shell. Reuse the destination project's header/container max width and padding when adapting.
- Preserve active/current states, trigger geometry, separator presence, mobile ordering, dropdown placement, and focus/keyboard behavior.
- Preserve row/list density, column meaning, trailing metadata/action gutters, truncation mechanics, sorting/filter controls, pagination, status icons, and empty/loading states.
- Text columns should truncate before reserved metadata/action lanes rather than wrapping under them or reaching the row edge.
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Page wrapper `max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10` around `sm:w-11/12 lg:w-3/4 mx-auto`; the invoice panel is `flex flex-col p-4 sm:p-10 bg-layer shadow-md rounded-xl`.
  - Header row: primary-colored spiral logo mark with `Preline Inc.` on the left; right-aligned `Invoice #` heading, number `3682303`, and 4-line address `45 Roker Terrace / Latheronwheel / KW5 8NW, London / United Kingdom`.
  - Billing grid: `Bill to:` over `Sara Williams` with address `280 Suzanne Throughway, / Breannabury, OR 45801, / United States`; opposite column holds dl pairs `Invoice date:` `03/10/2018` and `Due date:` `03/11/2018`.
  - Line items are CSS grids, not a `<table>`: uppercase headers `Item` / `Qty` / `Rate` / `Amount` are `hidden sm:grid`, and each cell repeats its own `sm:hidden` label on mobile.
  - Exactly 3 line rows in order: `Design UX and UI` qty 1 rate 5 `$500`; `Web project` qty 1 rate 24 `$1250`; `SEO` qty 1 rate 6 `$2000`.
  - Totals stack of 5 dl rows in order: `Subtotal:` `$2750.00`, `Total:` `$2750.00`, `Tax:` `$39.00`, `Amount paid:` `$2789.00`, `Due balance:` `$0.00`.
  - Closing copy: `Thank you!`, a contact sentence, then `example@site.com` and `+1 (062) 109-9222`, ending with `© 2022 Preline.`
  - Below (outside) the card: right-aligned action links `Invoice PDF` (layer-style with download icon) and `Print` (primary with printer icon); the block is static with no data-hs-* wiring.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 mx-auto my-4 sm:my-10">
        <div class="sm:w-11/12 lg:w-3/4 mx-auto">
          
          <div class="flex flex-col p-4 sm:p-10 bg-layer shadow-md rounded-xl">
            
            <div class="flex justify-between">
              <div>
                <svg class="size-10" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 26V13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <path d="M5 26V13.16C5 8.65336 8.58172 5 13 5C17.4183 5 21 8.65336 21 13.16C21 17.6666 17.4183 21.32 13 21.32H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                  <circle cx="13" cy="13.0214" r="5" fill="currentColor" class="fill-primary"/>
                </svg>

<h1 class="mt-2 text-lg md:text-xl font-semibold text-primary">Preline Inc.</h1>
              </div>

<div class="text-end">
                <h2 class="text-2xl md:text-3xl font-semibold text-foreground">Invoice #</h2>
                <span class="mt-1 block text-muted-foreground-1">3682303</span>

<address class="mt-4 not-italic text-foreground">
                  45 Roker Terrace<br>
                  Latheronwheel<br>
                  KW5 8NW, London<br>
                  United Kingdom<br>
                </address>
              </div>
              
            </div>

<div class="mt-8 grid sm:grid-cols-2 gap-3">
              <div>
                <h3 class="text-lg font-semibold text-foreground">Bill to:</h3>
                <h3 class="text-lg font-semibold text-foreground">Sara Williams</h3>
                <address class="mt-2 not-italic text-muted-foreground-1">
                  280 Suzanne Throughway,<br>
                  Breannabury, OR 45801,<br>
                  United States<br>
                </address>
              </div>

<div class="sm:text-end space-y-2">
                
                <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Invoice date:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">03/10/2018</dd>
                  </dl>
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Due date:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">03/11/2018</dd>
                  </dl>
                </div>
                
              </div>
              
            </div>

<div class="mt-6">
              <div class="border border-line-2 p-4 rounded-lg space-y-4">
                <div class="hidden sm:grid sm:grid-cols-5">
                  <div class="sm:col-span-2 text-xs font-medium text-muted-foreground-1 uppercase">Item</div>
                  <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Qty</div>
                  <div class="text-start text-xs font-medium text-muted-foreground-1 uppercase">Rate</div>
                  <div class="text-end text-xs font-medium text-muted-foreground-1 uppercase">Amount</div>
                </div>

<div class="hidden sm:block border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">Design UX and UI</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">5</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$500</p>
                  </div>
                </div>

<div class="sm:hidden border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">Web project</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">24</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$1250</p>
                  </div>
                </div>

<div class="sm:hidden border-b border-line-2"></div>
          
                <div class="grid grid-cols-3 sm:grid-cols-5 gap-2">
                  <div class="col-span-full sm:col-span-2">
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Item</span>
                    <p class="font-medium text-foreground">SEO</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Qty</span>
                    <p class="text-foreground">1</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Rate</span>
                    <p class="text-foreground">6</p>
                  </div>
                  <div>
                    <span class="sm:hidden text-xs font-medium text-muted-foreground-1 uppercase">Amount</span>
                    <p class="sm:text-end text-foreground">$2000</p>
                  </div>
                </div>
              </div>
            </div>

<div class="mt-8 flex sm:justify-end">
              <div class="w-full max-w-2xl sm:text-end space-y-2">
                
                <div class="grid grid-cols-2 sm:grid-cols-1 gap-3 sm:gap-2">
                  <dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Subtotal:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2750.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Total:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2750.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Amount paid:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$2789.00</dd>
                  </dl>

<dl class="grid sm:grid-cols-5 gap-x-3">
                    <dt class="col-span-3 font-semibold text-foreground">Due balance:</dt>
                    <dd class="col-span-2 text-muted-foreground-1">$0.00</dd>
                  </dl>
                </div>
                
              </div>
            </div>

<div class="mt-8 sm:mt-12">
              <h4 class="text-lg font-semibold text-foreground">Thank you!</h4>
              <p class="text-muted-foreground-1">If you have any questions concerning this invoice, use the following contact information:</p>
              <div class="mt-2">
                <p class="block text-sm font-medium text-foreground">example@site.com</p>
                <p class="block text-sm font-medium text-foreground">+1 (062) 109-9222</p>
              </div>
            </div>

<div class="mt-6 flex justify-end gap-x-3">
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
            <svg class="shrink-0 size-4" 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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
              Invoice PDF
            </a>
            <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              <svg class="shrink-0 size-4" 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"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect width="12" height="8" x="6" y="14"/></svg>
              Print
            </a>
          </div>
          
        </div>
      </div>