# Side by side comparison

> Two comparative cards side by side: the conventional method on the left with quiet styling, and your recommended approach on the right with a bold border, a badge pill, checkmark points, and a primary action button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/compare-side-by-side.html
Section: Compare
Access: Free, and free to keep.
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, list, list-item, paragraph
Keywords: compare, comparison, versus, cards, features, benefits

## Variations (2)

### Paper (the default)

Identical markup in every theme.

The comparison on your base ground with your contrast text. The winning card is framed with a 2px currentColor border and carries the action button.

### Night comparison

Identical markup in every theme.

The band inverts to your contrast ground with base text. The border and button invert with the section.


---

## The signature moment: asymmetric weight between two methods

**The winning card carries the visual weight.** The legacy card uses a thin 1px rule, quiet body type, and no call to action. The recommended card sits in a prominent 2px `currentColor` border with an uppercase badge, bold headline, checkmarks on every point, and a primary button. The visual hierarchy tells the reader which option is superior before they read a single bullet point.

Both cards share identical vertical padding and spacing presets so they align cleanly across the row on desktop, then stack in logical sequence on mobile.

## What happens at 390px

`core/columns` stacks below 782px into a single column. On a phone, the traditional approach renders first as a baseline, followed immediately by the highlighted modern approach with its primary action button.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere.
- **Your colours.** `base` for the ground, `contrast` for all typography and structural borders.
- **Your button style.** The button inherits the theme's button styling.

## What it decides for itself

- **The 50/50 card split** across a 1240px constrained measure.
- **The asymmetric 2px border** and badge highlight on the recommended card.
- **The checkmark bullet format** reinforcing feature advantages.

## What to change first

1. **The comparison points.** Update the bullet items in each card to reflect your specific value proposition.
2. **The button action.** Change the button text and link destination.
3. **The badge text.** Modify the pill badge from "Our approach" to "Recommended", "V2 Engine", or your brand name.