# Tier comparison cards

> Three membership tier cards side by side: each card features a tier badge, price headline, ruled checklist of privileges, and a dedicated action button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/compare-tier-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, list, list-item, paragraph
Keywords: tiers, membership, cards, compare, plans, pricing, benefits

## Variations (3)

### Paper (the default)

Identical markup in every theme.

The tier comparison cards on your base ground with your contrast text.

### Espresso and peach

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

States an espresso band, peach cards and accents, and Georgia serif headings.

### Night tier cards

Identical markup in every theme.

The band inverts to your contrast ground with base text.


---

## The signature moment: elevated center tier with full checklist

**Balanced triple card comparison.** Highlights the core recommendation in the middle column with 2px border styling.

## What happens at 390px

Columns stack into a single column on phones.

## 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.

## Display type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(1.5rem, 2vw, 2rem)