Comparison Cards

Comparison content is everywhere on client sites—pricing tables, membership tiers, service packages, product options. But building it often means asking editors to work inside dense repeater fields, nested tables, or overly rigid pricing layouts that feel disconnected from the actual page content.

A comparison block needs to be structured enough to stay consistent while still feeling natural for editors to update and expand.

The block keeps shared presentation in one place while each comparison option stays easy to manage on its own:

• The parent block owns the section heading, intro text, layout choice, card style, and background styling.
• Each child card block manages its own plan or package name, description, pricing, CTA, and feature list.
• Editors add, reorder, and duplicate cards directly in the block canvas.
• Pricing is optional, so the block works for more than traditional pricing tables—it can compare anything.
• Feature groups are semantic: included, limited, not included, and highlighted—not color-coded.
• Feature content is rich, allowing lists, descriptions, and context instead of one-line-only text.

Editors work with the comparison directly in the block canvas instead of digging through a crowded settings interface. This keeps the editing surface focused and natural.

• No nested repeaters—cards are visible as blocks, not hidden in a field stack.
• Canvas-based controls—section and card options are accessible without leaving the editor.
• Guided card fields—each card has a clear place for its title, description, pricing, and feature list.
• Editor/frontend parity—what editors see in the canvas matches what visitors see on the front end.

Comparison cards often rely on color to communicate feature inclusion or limitations. This block uses semantic structure and multiple cues:

• Labeled feature groups—each state (included, limited, not included, highlighted) has a visible text label and icon.
• Strikethrough for not-included—text-decoration adds a non-color cue for items that are not part of the plan.
• Bold for highlighted items—emphasis that works across all contexts.
• Focus-visible outlines—keyboard users see clear focus states on all interactive elements.
• Contrast-conscious color choices—theme variants and featured states are designed with WCAG contrast targets in mind.

• Native block management—editors can add, duplicate, and reorder cards using familiar WordPress controls.
• Responsive CSS Grid—cards move from one to three columns with intentional breakpoints.
• No JavaScript required—layout and card presentation rely on CSS and semantic markup.
• Matched editor output—Gutenberg wrapper styles are handled so the canvas stays close to the front end.
• Flexible pricing fields—prefix, value, suffix, and note fields work independently.
• Filtered feature content—rich feature copy still renders through WordPress content filters.
• Design-token theming—CSS custom properties keep visual variants portable and easier to rebrand.

The result is a comparison block that feels polished on the front end and manageable in the editor. It works for memberships, service tiers, packages, programs, or product options—without locking the client into a rigid pricing-table model.

Editors can add, reorder, or update options without asking for a new layout each time. That keeps comparison content easier to maintain as offers change.