Basel Standard / Docs

Product Card Editorial

Art-directed commerce block for featured products, launches, and curated drops.

Collection / Seating

Edition 04

Reception / Lounge

Alpine Frame Chair

Powder Coated SteelWalnutSmall-batch production

Built for featured product rails where materials, price, and availability need clear hierarchy without falling back to a generic catalog card.

$1,480

In stock

ProductCardEditorial is a featured commerce surface for product moments that need stronger hierarchy than a neutral catalog tile. It keeps collection labels, material notes, availability, price, and actions on one composed card.

Installation

Install

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

Usage

import { ProductCardEditorial } from "@/registry/swiss/blocks/product-card-editorial"

<ProductCardEditorial
  collectionLabel="Collection / Seating"
  editionLabel="Edition 04"
  eyebrow="Reception / Lounge"
  title="Alpine Frame Chair"
  meta={["Powder Coated Steel", "Walnut", "Small-batch production"]}
  description="Built for featured product rails where materials, price, and availability need clear hierarchy without falling back to a generic catalog card."
  price="$1,480"
  primaryAction={{ label: "Add to cart" }}
  secondaryAction={{ label: "View specification" }}
  statusLabel="In stock"
/>

Why This Block Exists

Some product moments need more than a neutral tile. This block gives launch shelves, specification pages, and featured assortments a repeatable product surface with clear action hierarchy.

Use it for one featured object inside a launch shelf, procurement view, or premium assortment.
Prefer it when price, material detail, and status all need to be visible without flattening the card into a generic tile.
Keep it as the primary object in a section; supporting items should usually stay quieter.

Examples

Default Featured Product

The base block is designed for a single highlighted object with material details, price, and a compact action row.

Collection / Seating

Edition 04

Reception / Lounge

Alpine Frame Chair

Powder Coated SteelWalnutSmall-batch production

Built for featured product rails where materials, price, and availability need clear hierarchy without falling back to a generic catalog card.

$1,480

In stock

Alternate Merchandising Tone

You can shift status and merchandising tone without losing the same structural rhythm.

Collection / Lighting

Preorder

Desk lighting

Offset Table Lamp

Brushed steelHand assembled

A featured object treatment that keeps material detail, commercial status, and action hierarchy on one disciplined surface.

$940

In Context

The block works best when the surrounding layout gives it room to lead. Pair it with quieter supporting panels instead of another equally weighted product hero.

Project / Furnishing

Batch 12

Lobby installation

Alpine Frame Chair

Lead time 4 weeksContract finishCOM available

A featured object card for specification pages where procurement detail still needs a composed commercial surface.

$1,480

Available for project orders

Specification notes

Use the block when one object needs commercial emphasis without losing procurement detail.

The block works well in launch shelves, procurement reviews, and featured product modules where material, availability, and action hierarchy need to stay legible at a glance.

Keep surrounding surfaces quieter so the featured object remains the clearest decision point in the section.

Guidance

Use It For A Featured Object

Lead with one product, not a dense product matrix.
Keep the object title and material notes short enough to preserve the strong vertical rhythm.
If the page needs comparison shopping more than editorial framing, use simpler repeated cards instead.

Preserve Action Hierarchy

One primary CTA is usually enough.
Secondary actions like spec sheets or materials should stay quieter.
If the block needs several competing commerce actions, the layout likely wants a different pattern.

Treat The Block As A Pattern, Not A Theme

The exact copy and state labels can change.
The value is the structural rhythm: collection, identity, supporting copy, price, actions, and availability.
If a surface needs materially different content zones, treat this block as a starting point and keep the same hierarchy rather than turning it into a generic card.

API Reference

ProductCardEditorial

ProductCardEditorial exposes content props for a single featured object.

Prop	Type	Required	Notes
`collectionLabel`	`string`	no	Small upper metadata label in the media rail.
`editionLabel`	`string`	no	Secondary metadata label in the media rail.
`eyebrow`	`string`	no	Product category or context label.
`title`	`string`	no	Primary product name.
`meta`	`string[]`	no	Supporting material or specification details.
`description`	`string`	no	Short commercial summary.
`price`	`string`	no	Primary price emphasis.
`primaryAction`	`{ label: string; href?: string }`	no	Primary commerce action.
`secondaryAction`	`{ label: string; href?: string }`	no	Secondary supporting action.
`statusLabel`	`string`	no	Availability or fulfillment status.

Composition Notes

Internal structure	Role
`Card` with `variant="editorial"` and `tone="hero"`	Defines the outer surface and emphasis level.
`CardMedia`	Holds collection and edition context.
`CardHeader` / `CardMeta`	Carries product identity and supporting details.
`CardPrice`	Establishes pricing emphasis.
`CardActions`	Keeps primary and secondary actions in one controlled row.

Use the block when one object needs to read as the clearest commercial decision in the section.

Previous: Tooltip Next: Product Card Overlay