product-card

Source

framework/global/scss/components/_product-card.scss
framework/brand/artsabers/scss/components/_product-card.scss
framework/theme/saberco/scss/components/_product-card.scss
wp-content/themes/saberco/template-parts/product-card.php (canonical anatomy)

Promotion candidates (1)

Kind	Name	Seen	Last	Actions
element	`heading`	2	2026-05-19 15:50:41

Block class name .product-card Edit in wp-admin

Example markup

Prompt

Operator-authored guidance for the camcom-design skill — when to use this block, composition rules, brand-variation notes. Saves on blur.

The WC loop item. Image, sale badge, title, optional description, meta row (price + stock + ATC). The most-composed block in the framework — embeds `.title`, `.price`, `.icon-cta`, `.button`, `.meta`, `.sale-badge`, `.breathe` in a typical render.

Anatomy lives in the template-part PHP file, not in the global SCSS. Brand themes pick up the anatomy via SCSS targeting the slot classes, and arrange the card to match brand visual language (image-on-top, image-on-left, image-bleed-to-edge, etc.).

When iterating a WC product loop, the canonical include is either `get_template_part('template-parts/product-card')` (for hand-rolled grids) or `wc_get_template_part('content', 'product')` (for WC's own archive loop). Both end up rendering the same card markup.

## Production examples

Canonical product-card from a WC shop loop (saberco template-part):

```html
<div class="product-card">

<h3 class="product-card__title title title__quaternary title__quaternary--large">Lightsaber Blue Blade</h3>

<div class="product-card__description">
            Combat-ready hilt with a 32-inch blue blade.
        </div>

<div class="icon-cta">
                    <span class="icon icon--medium icon-cta__icon">…</span>
                    <p class="icon-cta__text">Ready To Ship<br>7 - 10 days delivery</p>
                </div>

</div>

</div>
```

Title-only variant (used in compact related-products strips, no description, no ATC):

```html
<div class="product-card">

</div>
```

Legacy fields (tier, composition role, layout pattern, repeaters)

Pre-MC-plan-#64 schema. Data preserved here for reference. Collapsed into example markup + prompt opportunistically as we walk sections.

Composition role Layout pattern

Purpose Composes with

Elements observed

Modifiers observed

States

Non-canonical elements

Notes

The most-composed block in the framework. Anatomy is product-specific (image / title / description / meta-with-price-and-stock) — the name is legitimate even with `product` in it.
The global SCSS is nearly empty (`position: relative` only) — anatomy is declared in the template-part PHP file and styled per-brand. Different brand themes lay out the card very differently (image-on-top vs image-on-left, body padding, hover effects).
The title slot is the canonical class-mix surface: `<h3 class="product-card__title title title__quaternary title__quaternary--large">`. Three primitives compose — `.title` for typography family, `__quaternary` for size scale, `--large` for size modifier within that scale.
The embedded `.meta` block is structural — every brand's card has price + stock + ATC rows arranged via `.meta__row --spaced` with `.breathe --top` for vertical rhythm.
Renders via `wp-content/themes/{brand}/template-parts/product-card.php`, included by `get_template_part('template-parts/product-card', null, ['product' => $p, 'meta' => true])` from a loop or via WC's `wc_get_template_part('content', 'product')` override at `themes/{brand}/woocommerce/content-product.php`.

Source

Promotion candidates (1)

Prompt

AI-Assist