Resist the urge to reach for the Table block just because it’s “a comparison.” Table cells can’t easily hold a heading plus a styled list plus a background tint per column, and two Groups inside Columns gives you that flexibility for free.
Gutenberg
Design a two-column feature comparison layout
A scenario prompt that lays out a free-versus-paid plan comparison side by side with Columns blocks, handling mobile stacking order and non-color-dependent status icons.
Works with Claude / GPT720 uses★ 4.2
The prompt
gutenberg-two-column-feature-comparison
I need a simple two-column comparison for our app: Free plan versus Pro plan, showing which features each includes. Features: Basic reports (both), Custom dashboards (Pro only), API access (Pro only), 1 user seat (Free) / 10 user seats (Pro), Email support (both), Priority support (Pro only), Data export (Pro only) [replace with your own two things being compared and their feature lists] Build this using a `wp:columns` block with exactly two `wp:column` children, no Table block, since we want each column to have its own heading and background tint: 1. Give each column a `wp:group` wrapper with a `wp:heading` (plan name) at the top, and a `wp:list` of features below it. 2. For each feature, indicate included versus not included with both an icon and a text word, something like "Yes, custom dashboards" or "Not included, API access", not a bare checkmark or cross glyph alone. A colorblind user or a screen reader relying only on a green check versus a red X gets no usable signal from color or an unlabeled icon. 3. Set an explicit stacking order for mobile: decide whether Free or Pro should appear first when the columns collapse to a single column on small screens (usually the plan you want to upsell, Pro, goes second so a visitor scans Free first and sees what they'd be missing). Note this as a deliberate choice, not an accident of column order in the markup. 4. Keep both feature lists the same length and same order of features (Basic reports, Custom dashboards, API access, and so on) even though "Custom dashboards" says "Not included" under Free, matching row order across both columns is what makes a comparison actually easy to scan versus two independent bulleted lists. 5. Output the full two-column block markup with both feature lists complete.