Product cards — Three-view gallery card

A large product image and two stacked thumbnails sit above an aligned name, price and action.

ReactHTML

1440 × 480

Component.tsx83 lines

export default function ProductCardThreeViewGallery() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-4 text-neutral-900 sm:w-80">
      <div className="grid grid-cols-[3fr_1fr] gap-2">
        <div
          role="img"
          aria-label="Image placeholder: primary product angle"
          className="flex aspect-[4/3] 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>
        <div className="grid gap-2">
          <div
            role="img"
            aria-label="Image placeholder: second product angle"
            className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 aspect-square"
          >
            <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>
          <div
            role="img"
            aria-label="Image placeholder: third product angle"
            className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 aspect-square"
          >
            <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>
        </div>
      </div>
      <div className="mt-4 flex items-start justify-between gap-3">
        <h3 className="text-base font-semibold">Product name</h3>
        <p className="text-base font-semibold">$48</p>
      </div>
      <p className="text-sm text-neutral-600 mt-2">
        Brief description of the useful product detail.
      </p>
      <a
        href="#"
        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 mt-4 w-full"
      >
        View product
      </a>
    </article>
  )
}

Pattern notes

When to use: Use when multiple product angles help selection without a full carousel. Pick a single-image card for simple products. Variations: show packaging in a thumbnail, use a close-up detail, or replace one thumbnail with a video preview.
Hierarchy: Read the primary image, product name and $48 price, then supporting views and description. Limit the name to 4 words and description to 12. Supporting image labels name their distinct angles.
Responsive: The gallery keeps its 3:1 structure at both fixed widths. The product name wraps while the price stays aligned at the end; the action fills the card.
Layout: A 288px card widens to 320px at 640px with 16px padding. A 3:1 gallery uses 8px gaps; the main media is 4:3 and the two supporting regions are square. A name-price row follows after 16px, then a 14px description and full-width 44px link.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│┌────────────────────────────────────┐  ┌──────────────┐  │
││                                    │  │Image         │  │
││Image                               │  └──────────────┘  │
││                                    │                    │
││                                    │  ┌──────────────┐  │
│└────────────────────────────────────┘  │Image         │  │
│                                        └──────────────┘  │
│Product name                                        $48   │
│Short product description                                 │
│[                    View product                    ]    │
└──────────────────────────────────────────────────────────┘

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 — Three-view gallery card

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