# Product spec cards

> Three product comparison cards in a row: each card carries an image frame with an example photograph cropped to 4:3, print title, paper and size specifications, pricing, and an action button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/compare-product-cards.html
Section: Compare
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, image, list, list-item, paragraph
Keywords: product, compare, models, specs, cards, prints, editions

## Variations (3)

### Paper (the default)

Identical markup in every theme.

Three product cards across the band on your base ground with your contrast text.

### Night cards

Identical markup in every theme.

The band inverts to your contrast ground with base text.

### Slate and mint

This variation states its own colours and states its own type: identical in every theme.

States a cool slate ground, mint accents, and a geometric sans on the headings.


---

## The signature moment: image-anchored print comparison

**Each product card combines photographic preview, key metrics, and an action.** The three columns share a consistent 4:3 media frame, ruled specification points, and a conversion button at the foot. The middle edition is highlighted with a 2px border.

## What happens at 390px

Columns stack into a clean sequence of three product cards with image first, specs second, and action button last.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere.
- **Your colours.** `base` for ground, `contrast` for text and borders.
- **Your buttons.** Inherits theme button styling.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image or cover and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.