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.
Theme handoff
What comes from where
From your theme
- The typeface.
- Your colours.
- Your buttons.
Full pattern notes
Why it works, and how it is built
Open a topic for the complete design reasoning, editing guidance and implementation notes.
Design rationaleComposition, intent and nearest alternatives
Overview
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.
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.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
- The typeface. No font family is stated anywhere.
- Your colours.
basefor ground,contrastfor text and borders. - Your buttons. Inherits theme button styling.
Technical notesBlock mechanics, responsive behaviour and constraints
What happens at 390px
Columns stack into a clean sequence of three product cards with image first, specs second, and action button last.
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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.
Questions
Product spec cards: common questions
Does Product spec cards need a plugin?
No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image, list, list-item and paragraph), so it pastes into the block editor with nothing to install.
Will Product spec cards match my theme?
Choose by variation. Paper and Night cards take your theme’s palette; Slate and mint brings its own colours.
How many variations does Product spec cards have?
3: Paper, Night cards and Slate and mint. Each is its own markup; choose one in the toolbar above the preview before you copy.
Can I use my own images?
Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.
Is Product spec cards free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Night cards
Fetching the markup…Variation: Slate and mint
Fetching the markup…
