Product cards — Specs row with price footer

A compact product card with a media band, three specification columns and a price/action footer. Use it for products whose format and quantities inform the purchase.

ReactHTML

1440 × 480

Open in new tab

Component.tsx37 lines

export default function ProductCardSpecColumns() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-80">
      <div className="flex items-center justify-between gap-3">
        <p className="text-sm font-medium text-neutral-500">Category label</p>
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">Digital</span>
      </div>
      <div role="img" aria-label="Image placeholder: product cover or package preview" className="mt-3 flex aspect-[4/3] h-16 w-full items-center justify-center rounded-lg bg-neutral-100 text-neutral-400">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-10">
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <circle cx="9" cy="9" r="2" />
          <path d="m21 15-5-5L5 21" />
        </svg>
      </div>
      <h3 className="mt-3 text-base font-semibold">Product name</h3>
      <p className="mt-1 text-sm text-neutral-600">Short description of what is included and how to use it.</p>
      <dl className="mt-3 grid grid-cols-3 border-y border-neutral-200 py-3">
        <div className="flex flex-col-reverse gap-1 border-r border-neutral-200 pr-3">
          <dt className="text-xs text-neutral-500">Format</dt>
          <dd className="text-sm font-semibold">24-bit</dd>
        </div>
        <div className="flex flex-col-reverse gap-1 border-r border-neutral-200 px-3">
          <dt className="text-xs text-neutral-500">Size</dt>
          <dd className="text-sm font-semibold">1.2 GB</dd>
        </div>
        <div className="flex flex-col-reverse gap-1 pl-3">
          <dt className="text-xs text-neutral-500">Files</dt>
          <dd className="text-sm font-semibold">120</dd>
        </div>
      </dl>
      <footer className="mt-3 flex items-center justify-between gap-3">
        <p className="text-xl font-semibold">$48</p>
        <button type="button" aria-label="Buy Product name" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Buy</button>
      </footer>
    </article>
  )
}

Pattern notes

When to use: Use for downloads or products that can be compared through three short specs. Pick product-card-horizontal-media for list views where space is limited. Variations: swap file count for duration, show a different format, or use availability in the badge.
Hierarchy: Read the category and Digital badge, image, 16px semibold name and 14px description, then the specs and 20px semibold price. Each spec gives its 14px semibold value above a 12px muted label: 24-bit Format, 1.2 GB Size and 120 Files. Slots: category up to 2 words, name up to 3, description up to 12, spec values up to 7 characters and labels up to 6. Buy has an item-specific accessible label.
Responsive: The root is 288px below 640px and 320px from 640px. Media stays 64px tall. Specifications remain three columns; the footer stays one row and text wraps naturally.
Layout: A 288px-wide bordered card with p-4 (16px padding), an 8px radius and sm:w-80 (320px from 640px). The header pairs an eyebrow and badge. A 64px-high media band follows after 12px, then a title after 12px and description after 4px. A three-column definition list uses equal columns, 12px vertical padding, 1px top/bottom dividers and vertical cell dividers. A price/action footer follows after 12px; Buy is a 44px primary action.
States: Buy changes from neutral-900 to neutral-700 on hover and shows the standard 2px keyboard-focus outline offset 2px. Badge, media and definition list are static; no open, selected or disabled controls are shown.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│ Category label                              [Digital]  │
│ ┌────────────────────────────────────────────────────┐ │
│ │                       Image                        │ │
│ └────────────────────────────────────────────────────┘ │
│ Product name                                           │
│ Short description of what is included                  │
│ ─────────────────┬────────────────┬─────────────────── │
│ 24-bit           │ 1.2 GB         │ 120                │
│ Format           │ Size           │ Files              │
│ ─────────────────┴────────────────┴─────────────────── │
│ $48                                              [Buy] │
└────────────────────────────────────────────────────────┘

View all

Product cards — Compact product order summary
Layout tags: stacked,media,numbers
Product cards — Digital product with included files
Layout tags: stacked,list,icons
Product cards — Featured product and related list
Layout tags: asymmetric,media,list

Product cards — Specs row with price footer

Pattern notes

More in Product cards

Product cards — Compact product order summary

Product cards — Digital product with included files

Product cards — Featured product and related list