Basel Standard / Docs

Product Card Split

Split-layout commerce block that balances media presence with structured product metadata.

Specification / Seating

Grid Back Lounge

ModularIndoor1980 mm

Useful when a product needs a visual rail and a denser specification column. The split keeps attributes, price, and actions in a predictable order.

$2,240

ProductCardSplit is a structured commerce block for product moments that need more metadata than an overlay card can comfortably hold. It balances a defined media rail with a content column for title, attributes, price, and follow-up actions.

Installation

Install

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

Usage

import { ProductCardSplit } from "@/registry/swiss/blocks/product-card-split"

<ProductCardSplit
  eyebrow="Specification / Seating"
  title="Grid Back Lounge"
  meta={["Modular", "Indoor", "1980 mm"]}
  description="Useful when a product needs a visual rail and a denser specification column. The split keeps attributes, price, and actions in a predictable order."
  price="$2,240"
  primaryAction={{ label: "Configure" }}
  secondaryAction={{ label: "View dimensions", variant: "catalog" }}
/>

Why This Block Exists

Not every featured product wants a campaign-style overlay. This block gives merchandising and specification views a clearer two-column structure for attributes, price, and next actions.

Use it when merchandising needs both image presence and readable metadata.
Prefer it to a plain card when the product attributes deserve their own structured rail.
Choose the overlay block instead when art direction and contrast are more important than spec density.

Examples

Default Split Layout

The base block divides attention between media and structured product information.

Specification / Seating

Grid Back Lounge

ModularIndoor1980 mm

Useful when a product needs a visual rail and a denser specification column. The split keeps attributes, price, and actions in a predictable order.

$2,240

<ProductCardSplit />

The same split structure works across launch shelves, specification views, and richer product decision surfaces.

Launch selectionEdition 03

Lighting / Architectural

Folded Plane Lamp

Designed for launch moments where one object carries the section. Price, category, and action remain legible under a high-contrast overlay.

$680

In Context

This block works well in a launch shelf or editorial feature where one product needs more detail than the supporting items around it.

Project / Seating

Grid Back Lounge

Lead time 4 weeksContract grade1980 mm

A structured product block for procurement and specification views where image presence matters but the buying decision still depends on readable metadata.

$2,240

Decision support

Use the split layout when attributes and follow-up actions are part of the decision.

The structure fits specification pages, project pricing flows, and richer product shelves where dimensions, finish notes, or configuration status matter.

Guidance

Use It When Metadata Matters

The split layout is strong when dimensions, tags, or attribute chips affect the buying decision.
Keep the supporting paragraph concise so the metadata remains scannable.
If the product story is purely atmospheric, the overlay block may be a better fit.

Preserve The Two-Column Rhythm

Let the media rail stay visually simple.
Keep the content side structured with title, meta, copy, price, then actions.
Avoid adding long body text that turns the block into a full editorial article.

Treat It As A Prebuilt Pattern

Use the content props to match the object, price, and decision flow in the parent surface.
Keep the media side visually simple so the specification column can stay legible.
Reuse the same order of information instead of reassembling the split card for each product family.

API Reference