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.
What it inherits from your theme
- The typeface. No font family is stated anywhere.
- Your colours.
basefor the ground,contrastfor 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
- 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.
What happens at 390px31 words
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.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Night comparison
Fetching the markup…