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.

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.