Tailwind CSS Order Summary Cards Blocks

All Blocks
Ecommerce
Order Summary Cards

Order Summary Cards

Order summary cards for admin order recaps, promo inputs, line items, and total breakdowns.

Detailed Order Summary Card with Status Badges Pro

Wide order summary card combines payment and fulfillment badges, item detail rows, promo redemption, total breakdowns, and previous or next navigation.

Create a responsive UI block named "Detailed Order Summary Card with Status Badges" 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/ecommerce/order-summary-cards/#detailed-order-summary-card-with-status-badges. 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: ecommerce/order-summary-cards
- Block ID: detailed-order-summary-card-with-status-badges
- Source description: Wide order summary card combines payment and fulfillment badges, item detail rows, promo redemption, total breakdowns, and previous or next navigation.
- Preview iframe: https://preline.co/blocks/ecommerce/order-summary-cards/iframes/pro/detailed-order-summary-card-with-status-badges.html (repo path: blocks/ecommerce/order-summary-cards/iframes/pro/detailed-order-summary-card-with-status-badges.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/cards/order-details.html
  - partials/pro/ecommerce-admin/navbars/tbb-button-and-dropdown.html
  - partials/pro/ecommerce-admin/sources/order-details-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:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- 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):
  - Single card `<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">` with a title bar, a `p-5` body, and a `py-2 px-5 border-t border-card-footer` pager. The preview's `max-w-4xl mx-auto` centering is iframe demo chrome, not the card's own width.
  - Title bar reads `Order #32543` on the left and, on the right, a small `Export` button with a diagonal-arrow icon plus a `size-8.5` horizontal three-dot dropdown trigger. That dropdown is a Preline HSDropdown (`[--auto-close:inside] [--placement:top-right]`, `w-24`), closed on first load, listing `Duplicate`, `Cancel`, `Archive`, `Edit`, `Print`, a divider, then `Delete`.
  - First body row shows `Order placed: 17 Aug, 2023, 5:48 am` on the left and two pill badges on the right: green `Paid` then yellow `Unfulfilled`. Keep those literal green/yellow badge palettes - they are status colors, not the primary token.
  - Exactly 3 item rows follow, each a `grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5` with a `size-28 rounded-md` photo and six labelled `Label` / value pairs in fixed order: `Item`, `Color`, `Size`, `Price`, `Quantity`, `Expected delivery date`.
  - Item values in order: `White T-shirts` / `White` / `M` / `$21` / `1` / `Oct 3, 2:00 pm`; `Pattern Winter Sweater` / `-` / `M` / `$37` / `1` / `Oct 3, 4:20 pm`; `Mango Women's shoe` / `Brown` / `UK 7` / `$65` / `1` / `Oct 5, 5:50 pm`. Only the third row carries a yellow alert above it reading `This item will be delivered in a different shipment.`
  - The totals block is right-offset (`grid sm:grid-cols-11` with the panel at `sm:col-span-6 sm:col-start-6`), not full width. It shows `Promo code` above a `p-1 ps-3 bg-surface rounded-lg` bar holding the already-applied uppercase code `Thankyou` and a primary `Redeem` button - there is no empty input to type into.
  - Totals `dl` uses `grid-cols-12` with 8/4 splits: `Subtotal:` `$123.00`, `Delivery (Standard delivery):` `0.00` (no currency symbol on this one), `Est tax:` `$20.00`, `Order total:` `$143.00`.
  - Footer is a 3-part pager: ghost `Prev` with a left chevron, centered muted text `Order 36 of 129`, ghost `Next` with a right chevron. Aside from the header dropdown the card is static - no tabs, charts, sliders, or modals.

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="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-2 px-5 flex justify-between items-center gap-x-3 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Order #32543
    </h2>

<div class="flex justify-end items-center gap-x-2">
      
      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs 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" data-hs-overlay="#hs-pro-epfo">
        Export
        <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="M7 7h10v10"/><path d="M7 17 17 7"/></svg>
      </button>

<div class="hs-dropdown [--auto-close:inside] [--placement:top-right] relative inline-flex">
        
        <button id="hs-pro-dupfind" type="button" class="size-8.5 inline-flex justify-center items-center gap-x-1.5 text-xs 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" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
          <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
        </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-24 transition-[opacity,margin] duration opacity-0 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-dupfind">
          <div class="p-1">
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Duplicate
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Cancel
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Archive
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Edit
            </button>
            <button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Print
            </button>

<button type="button" class="w-full flex items-center gap-x-3 py-1.5 px-2 rounded-lg text-[13px] text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
              Delete
            </button>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>

<div class="p-5 flex flex-col">
    
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4">
      <p class="text-sm text-foreground">
        Order placed: 17 Aug, 2023, 5:48 am
      </p>
      <div class="inline-flex items-center gap-x-2">
        <span class="py-1 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-green-100 text-green-800 rounded-full dark:bg-green-500/10 dark:text-green-500">
          Paid
        </span>
        <span class="py-1 px-2 inline-flex items-center gap-x-1.5 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full dark:bg-yellow-500/10 dark:text-yellow-500">
          Unfulfilled
        </span>
      </div>
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                White T-shirts
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                White
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $21
              </p>
            </div>
          </div>
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Quantity
              </p>
              <p class="text-sm text-foreground">
                1
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 3, 2:00 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1611911813383-67769b37a149?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                Pattern Winter Sweater
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                -
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $37
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 3, 4:20 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      
      <div class="mb-5 bg-yellow-50 border border-yellow-200 text-sm rounded-lg p-2 dark:bg-yellow-800/10 dark:border-yellow-900" role="alert" tabindex="-1" aria-labelledby="hs-pro-eodlisp-label">
        <div class="flex">
          <svg class="shrink-0 mt-1 size-4 text-yellow-800 dark:text-yellow-600" 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"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
          <div class="ms-2.5 grow">
            <h3 id="hs-pro-eodlisp-label" class="font-semibold text-yellow-800 dark:text-yellow-600">
              Split shipment
            </h3>
            <p class="text-sm text-yellow-700 dark:text-yellow-700">
              This item will be delivered in a different shipment.
            </p>
          </div>
        </div>
      </div>

<div class="grid grid-cols-1 sm:grid-cols-4 md:grid-cols-11 items-center gap-5">
        <div class="col-span-1 md:col-span-2">
          <img class="shrink-0 size-28 sm:w-auto sm:h-auto xl:size-28 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
        </div>

<div class="col-span-1 md:col-span-3">
          <div class="grid grid-cols-2 sm:grid-cols-1 gap-5">
            <div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Item
              </p>
              <p class="text-sm text-foreground">
                Mango Women's shoe
              </p>
            </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Color
              </p>
              <p class="text-sm text-foreground">
                Brown
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Price
              </p>
              <p class="text-sm text-foreground">
                $65
              </p>
            </div>
          </div>
        </div>

<div>
              <p class="mb-1 text-xs text-muted-foreground-1">
                Expected delivery date
              </p>
              <p class="text-sm text-foreground">
                Oct 5, 5:50 pm
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>

<div class="pt-5 mt-5 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="grid sm:grid-cols-11 gap-5">
        <div class="col-span-full sm:col-span-6 sm:col-start-6">
          
          <div>
            <span class="block mb-2 text-sm font-medium text-foreground">
              Promo code
            </span>
            <div class="flex justify-between items-center gap-x-3 p-1 ps-3 bg-surface rounded-lg">
              <span class="font-medium text-xs uppercase text-foreground">
                Thankyou
              </span>
              <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium rounded-md bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
                Redeem
              </button>
            </div>
          </div>

<dl class="mt-4 grid grid-cols-12 gap-2 pe-1">
            <dt class="col-span-8 text-sm text-foreground">Subtotal:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$123.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Delivery (Standard delivery):</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">0.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Est tax:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$20.00</dd>
            <dt class="col-span-8 text-sm text-foreground">Order total:</dt>
            <dd class="col-span-4 text-end font-semibold text-sm text-foreground">$143.00</dd>
          </dl>
          
        </div>
      </div>
    </div>
    
  </div>

<div class="py-2 px-5 border-t border-card-footer">
    <div class="flex justify-between items-center gap-x-2">
      
      <button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-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="m15 18-6-6 6-6"/></svg>
        Prev
      </button>
      
      
      <span class="text-xs text-muted-foreground-1">
        Order 36 of 129
      </span>

<button type="button" class="py-2 px-2.5 inline-flex items-center gap-x-1.5 text-xs rounded-lg border border-transparent text-foreground hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
        Next
        <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="m9 18 6-6-6-6"/></svg>
      </button>
      
    </div>
  </div>
  
</div>

Compact order summary card stacks item thumbnails, a promo code field, subtotal and tax rows, and edit-cart or continue actions.

Create a responsive UI block named "Compact Order Summary Card with Promo Code" 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/ecommerce/order-summary-cards/#compact-order-summary-card-with-promo-code. 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: ecommerce/order-summary-cards
- Block ID: compact-order-summary-card-with-promo-code
- Source description: Compact order summary card stacks item thumbnails, a promo code field, subtotal and tax rows, and edit-cart or continue actions.
- Preview iframe: https://preline.co/blocks/ecommerce/order-summary-cards/iframes/pro/compact-order-summary-card-with-promo-code.html (repo path: blocks/ecommerce/order-summary-cards/iframes/pro/compact-order-summary-card-with-promo-code.html)
- Source markup reference:
  - partials/pro/ecommerce-admin/cards/order-summary.html

Block-specific fidelity rules:
- Preserve grid relationships, content width, card density, border/radius treatment, metric hierarchy, and status marker geometry.
- Do not align a local card to a broader page/header container unless the source does.
- 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):
  - Single card `<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">` with a `py-3 px-5 border-b border-card-header` header, a `pt-4 pb-5 px-5` body, and a `py-4 px-5 border-t border-card-footer` button row. The preview's `max-w-md mx-auto` centering is iframe demo chrome, not the card's own width.
  - Header holds exactly one heading, `Items (2)`, matching the 2 product rows below.
  - Body is 6 sibling blocks each carrying `pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0`, in order: product 1, product 2, promo code, subtotal/delivery list, tax list, order-total list. Keep the separator pattern rather than a single wrapping divider.
  - Each product row is `flex items-center gap-x-5` with a `size-20 rounded-md` photo and a quantity badge `1` pinned at `-top-2.5 -inset-e-2.5` as a `min-w-6 min-h-6 rounded-full bg-primary` circle with `border-2 border-card-line`. The detail list runs price first, then name, then color, then size.
  - Product 1 reads `$65`, `Mango Women's shoe`, `Color:` `Brown`, `Size:` `UK 7`. Product 2 reads `$21`, `Calvin Klein T-shirts`, `Color:` `White`, `Size:` `M`. Both photos are Unsplash images and both quantity badges show `1`.
  - Promo block is labeled `Promo code`, input placeholder `e.g. 50OFF`, with helper text `Terms and conditions applied.` below. There is no apply button next to the field.
  - The three totals blocks are separate `dl` grids (`grid grid-cols-2 gap-2`) with right-aligned semibold values: `Subtotal:` `$86.00` and `Delivery:` `Free`, then `Est tax:` `$20.00`, then `Order total:` `$106.00`.
  - Footer is two equal `w-full` buttons: neutral `Edit cart` with a pencil icon, then primary `Continue`. The card is fully static - no Preline JS plugins, no dropdowns, badges, or status pills.

<div class="flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
  
  <div class="py-3 px-5 border-b border-card-header">
    <h2 class="inline-block font-semibold text-foreground">
      Items (2)
    </h2>
  </div>

<div class="pt-4 pb-5 px-5 flex flex-col justify-between h-full">
    
    <div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="flex items-center gap-x-5">
        <div class="relative shrink-0">
          <img class="shrink-0 size-20 rounded-md" src="https://images.unsplash.com/photo-1610398752800-146f269dfcc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
          <div class="absolute -top-2.5 -inset-e-2.5 z-10">
            <span class="py-0.5 px-1.5 min-w-6 min-h-6 flex flex-col justify-center items-center rounded-full text-xs font-medium bg-primary border-2 border-card-line text-primary-foreground">1</span>
          </div>
        </div>
        <div class="grow">
          <ul>
            <li>
              <span class="text-sm text-foreground">$65</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Mango Women's shoe</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Color:</span>
              <span class="text-sm text-foreground">Brown</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Size:</span>
              <span class="text-sm text-foreground">UK 7</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <div class="flex items-center gap-x-5">
        <div class="relative shrink-0">
          <img class="shrink-0 size-20 rounded-md" src="https://images.unsplash.com/photo-1613852348851-df1739db8201?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
          <div class="absolute -top-2.5 -inset-e-2.5 z-10">
            <span class="py-0.5 px-1.5 min-w-6 min-h-6 flex flex-col justify-center items-center rounded-full text-xs font-medium bg-primary border-2 border-card-line text-primary-foreground">1</span>
          </div>
        </div>
        <div class="grow">
          <ul>
            <li>
              <span class="text-sm text-foreground">$21</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Calvin Klein T-shirts</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Color:</span>
              <span class="text-sm text-foreground">White</span>
            </li>
            <li>
              <span class="text-sm text-foreground">Size:</span>
              <span class="text-sm text-foreground">M</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <label for="hs-pro-echddpc" class="block mb-2 text-sm font-medium text-foreground">
        Promo code
      </label>
      <input id="hs-pro-echddpc" type="email" class="py-1.5 sm:py-2 px-3 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-layer-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:z-10 focus:ring-primary-focus" placeholder="e.g. 50OFF">
      <p class="mt-2 text-xs text-muted-foreground-1">
        Terms and conditions applied.
      </p>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Subtotal:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$86.00</dd>
        <dt class="text-sm text-foreground">Delivery:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">Free</dd>
      </dl>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Est tax:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$20.00</dd>
      </dl>
    </div>

<div class="pt-3 mt-3 border-t border-line-2 first:pt-0 first:mt-0 first:border-t-0">
      <dl class="grid grid-cols-2 gap-2">
        <dt class="text-sm text-foreground">Order total:</dt>
        <dd class="text-end font-semibold text-sm text-foreground">$106.00</dd>
      </dl>
    </div>
    
  </div>

<div class="py-4 px-5 border-t border-card-footer">
    <div class="flex gap-x-3">
      <button type="button" class="py-2 px-3 w-full inline-flex justify-center 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">
        <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="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
        Edit cart
      </button>

<button type="button" class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus">
        Continue
      </button>
    </div>
  </div>
  
</div>

Order Summary Cards

Detailed Order Summary Card with Status Badges Pro

Compact Order Summary Card with Promo Code Pro