Compare cover panels, Pattern Paste Canonical: https://patternpaste.com/pattern/compare-cover-panels.html Library (https://patternpaste.com/patterns/) Compare (https://patternpaste.com/patterns/compare/) Catalogue access Standard # 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. Start here ## What to change first - Replace the option names and three differences with the choice your visitor is making. - Update both button labels and destinations. - Replace the example photograph while keeping a crop with enough open space around the plates. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your buttons. ### Set by this pattern - The unequal 58/34 panel widths - The offset position - The type scale. 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 A two-option comparison placed inside one photographic cover. The recommended option occupies a large plate near the upper left, while a shorter alternative sits lower and to the right. A deliberate channel between them keeps the photograph present as part of the composition. ### 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. Make it yoursVariations and the edits to make first ### What to change first - Replace the option names and three differences with the choice your visitor is making. - Update both button labels and destinations. - Replace the example photograph while keeping a crop with enough open space around the plates. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### 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 (https://patternpaste.com/image-credits/) for the source and licence. Pasting the pattern does not import the example into the Media Library. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. 7.8KB of core-block markup, 10 blocks (button, buttons, column, columns, cover, group, heading, list, list-item, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Pricing Pricing cover menu A screen-height cover with three plans set on it like a restaurant menu: a heavy veil of your theme's contrast colour over the photograph, a display headline in the lower left and a narrow ruled price list in the right-hand column, each plan a name and its price on one line and a sentence beneath, hairline rules between, one button under the list. The list drops beneath the headline on a phone. Includes a replaceable example photograph and placeholder prices. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/pricing-cover-menu.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html)Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks button, buttons, column, columns, cover, group, heading, list, list-item, paragraph Core only yes Chains 18, deepest 3 rungs currentColor no color base, black, contrast, role-label, white spacing 30, 40, 50, 60, 80 font-size large, medium, x-large Continue exploring ## Next in Compare Explore all 6 Compare patterns (https://patternpaste.com/patterns/compare/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Compare Compare Standard ### Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/compare-compact-rows.html) Night compact rows (https://patternpaste.com/pattern/compare-compact-rows.html#variant=compact-rows-night) Shot in Twenty Twenty-Five Compare Compare Listings Standard ### 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. 10 blocks · 1 variation Open preview (https://patternpaste.com/pattern/compare-product-cards.html) Night cards (https://patternpaste.com/pattern/compare-product-cards.html#variant=product-cards-night) Shot in Twenty Twenty-Five Compare Compare Standard ### 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. 9 blocks · 1 variation Open preview (https://patternpaste.com/pattern/compare-side-by-side.html) Night comparison (https://patternpaste.com/pattern/compare-side-by-side.html#variant=side-by-side-night)