Product Card Overlay

ProductCardOverlay is a launch-facing commerce block for moments when one object needs to carry the full visual argument. It combines a full-bleed field, inverse text treatment, price, and one clear action in a format closer to a campaign panel than a standard tile.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { ProductCardOverlay } from "@/registry/swiss/blocks/product-card-overlay"

<ProductCardOverlay
  collectionLabel="Launch selection"
  editionLabel="Edition 03"
  eyebrow="Lighting / Architectural"
  title="Folded Plane Lamp"
  description="Designed for launch moments where one object carries the section. Price, category, and action remain legible under a high-contrast overlay."
  price="$680"
  primaryActionLabel="View product"
/>

Why This Block Exists

Some launches need a stronger focal surface than a neutral product card. This block gives release pages and feature shelves a high-contrast object treatment with clear hierarchy and short commercial copy.

• Use it for featured drops, premium objects, and launch storytelling.
• Prefer it when the page wants one highly art-directed product moment.
• Use simpler cards when the page needs repeated catalog browsing instead of one focal feature.

Examples

Default Overlay Treatment

The base block leads with contrast, short copy, and one obvious CTA.

<ProductCardOverlay />

Adapted Merchandising Tone

You can shift category, price, action, and background treatment while keeping the same contrast model.

In Context

This block works best when nearby surfaces stay quieter so the product hero remains the loudest commerce element in the section.

Guidance

Use It As The Hero Product

• Lead with one featured object, not a dense matrix of comparable SKUs.
• Keep title and body copy short enough to preserve the high-contrast composition.
• Let the CTA cluster stay simple, usually one primary action.

Respect The Contrast Model

• The inverse text treatment depends on a dark or visually assertive background.
• If the media becomes lighter or busier, adjust the underlying composition rather than forcing the copy to work harder.
• Keep metadata terse so the overlay does not become cramped.

Fork From The Pattern When Needed

• Use the content props to adapt title, metadata, pricing, and action label for a specific release.
• Keep the contrast model intact when you change the background treatment.
• Treat the block as a focal surface, not a universal catalog card.

API Reference

ProductCardOverlay

ProductCardOverlay exposes content props for one featured object.

Composition Notes