Split With Comparison
Split hero with headline, lede, and dual CTAs beside a two column panel contrasting the old way as crossed items against checked new ones.
Split hero with headline, lede, and dual CTAs beside a two column panel contrasting the old way as crossed items against checked new ones.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Split With Comparison is a two column hero. The left column holds a large headline, a lede, and two CTAs. The right column is a bordered panel split into two labeled columns: the old way as muted items with a cross, the Acme way as checked items, closed by a full width footer line about how fast teams switch. The contrast between the two columns carries the argument. The layout fills the viewport and ships without its own header.
The old way and the new way are two plain arrays read line for line, so the rows stay paired and the panel reshapes by editing strings. The divider flips from a horizontal rule on phones to a vertical one on wider screens, which keeps the two columns readable at every width. The footer line is one sentence you can replace or remove.
Reach for this block when your product wins by replacing a painful status quo rather than by adding features. Laying the old way beside the new way names the pain a visitor already feels and answers it in the same glance, which a feature list cannot do. It argues by contrast where split-with-metrics argues by number, so pick it when the villain is a workflow, not a competitor.
A natural flow around it on a Marketing Pro page:
Before
After
One strong use is old workflow versus new workflow for a category you are disrupting. Other pairings that fit the two columns:
Tip: keep the two columns row for row parallel, each old line should have the new line that answers it sitting directly across.