# Compare cover panels

> A two-option comparison placed inside one photographic cover: a large recommended panel and a smaller, offset alternative sit on opaque plates with a broad channel of the photograph left visible between them. Each option has concise differences and its own action. The panels stack in recommendation-first order on a phone. Includes a replaceable example photograph. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/compare-cover-panels.html
Section: Compare
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. 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, cover, group, heading, list, list-item, paragraph
Keywords: compare, comparison, cover, options, recommended, services

Promise: Identical markup in every theme.

---

## The signature moment: two unequal panels over one image

The two choices do not meet at a shared edge. The recommended panel is visibly larger and carries the section heading, fuller set of differences and first action. The secondary panel is narrower, lower and concise. The open photograph between and around the plates makes them feel placed within one scene rather than arranged as an ordinary card row.

## What happens at 390px

The columns stack in reading order. The recommended option remains first, followed by the shorter alternative, with the photograph visible around both plates. Each action stays with the option it belongs to.

## What it inherits from your theme

- **The typeface.** No font family is stated.
- **Your colours.** Both opaque panels use `base`; their text uses `contrast` and labels can take the theme's label role.
- **Your buttons.** Both actions inherit the theme's button treatment.

## What it decides for itself

- **The unequal 58/34 panel widths** and the open channel between them.
- **The offset position** of the shorter panel within the photograph.
- **The type scale.** Headings use the theme's `x-large` and `large` ladder rungs; body copy uses the `medium` rung with a readable fallback and 1.6 line height.

## What to change first

1. Replace the option names and three differences with the choice your visitor is making.
2. Update both button labels and destinations.
3. Replace the example photograph while keeping a crop with enough open space around the plates.

## Contrast and image replacement

Every word sits on an opaque `base` plate with `contrast` text, checked at
4.5:1. The photograph has no veil because none of the copy sits directly on it.
Both buttons inherit the host theme's button treatment.

The example photograph comes from the WordPress Photo Directory. Its public
URL keeps it visible after pasting. Select the cover and choose **Replace** to
use your own Media Library file. See [image credits](/image-credits/) for the
source and licence. Pasting the pattern does not import the example into the
Media Library.