Side by side comparison, Pattern Paste Canonical: https://patternpaste.com/pattern/compare-side-by-side.html Core Patterns (https://patternpaste.com/patterns/) Compare (https://patternpaste.com/patterns/compare/) Free 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The comparison points. Update the bullet items in each card to reflect your specific value proposition. - The button action. Change the button text and link destination. - The badge text. Modify the pill badge from "Our approach" to "Recommended", "V2 Engine", or your brand name. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your button style. ### Set by this pattern - The 50/50 card split - The asymmetric 2px border - The checkmark bullet format 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 Two comparative cards set side by side: the traditional 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. ### 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. Make it yoursVariations and the edits to make first ### What to change first - The comparison points. Update the bullet items in each card to reflect your specific value proposition. - The button action. Change the button text and link destination. - The badge text. Modify the pill badge from "Our approach" to "Recommended", "V2 Engine", or your brand name. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Side by side comparison: common questions Does Side by side comparison need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, list, list-item and paragraph), so it pastes into the block editor with nothing to install. Will Side by side comparison match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Side by side comparison have? 2: Paper and Night comparison. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Side by side comparison free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### Pair with Pricing Donate impact tiers Four donation cards for a charity, each amount set at display size over what it pays for, one plain line of how, and a Donate button on the foot. The third card is inverted as the most given gift, and a note under the cards carries the charity number, Gift Aid and a link to give another amount. States no colour and no font of its own. (https://patternpaste.com/pattern/donate-impact-tiers.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 Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Compare Access Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, list, list-item, paragraph Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Compare Explore all 8 Compare patterns (https://patternpaste.com/patterns/compare/) Shot in Twenty Twenty-Five Compare No plugin needed ### Comparison shared spine Repair and commission choices share a narrow central criteria spine, so each row compares the same question before moving on. Compare Preview pattern (https://patternpaste.com/pattern/compare-shared-spine.html) Shot in Twenty Twenty-Five Compare No plugin needed ### 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. Compare Preview pattern (https://patternpaste.com/pattern/compare-tier-cards.html) Shot in Twenty Twenty-Five Compare No plugin needed ### Visual comparison pillars Three visual comparison pillars side by side: each column carries a 16:9 media frame, capability highlight, feature checklist, and conversion button, with the centre recommendation elevated with a bold border. Compare Preview pattern (https://patternpaste.com/pattern/compare-visual-pillars.html)