Before After Split
Centered headline and lede above a divided two column panel comparing the current week with the same week on the product, four lines per side.
Centered headline and lede above a divided two column panel comparing the current week with the same week on the product, four lines per side.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Before After Split is a contrast closing call to action. A centered headline and lede sit above a divided panel that puts the current week beside the same week run on the product, four matched lines per side. The left column marks each line with a muted cross, the right column marks each with a filled check, and a footer holds one primary button next to a quiet link. Icons and theme tokens carry the whole block, with no imagery or gradients.
The two sides are each a short array of lines, kept equal in count and length so the comparison reads as a fair trade rather than a stacked deck. The headline, lede, both columns, the button label, and the footer link are all independent copy. Because the panel is a single bordered card, the contrast comes from the icons and weight rather than color blocks, so it holds up in light and dark mode.
Reach for this block when the close needs to name the problem and the fix in the same glance. It suits a product whose value is a before and after story, like a project tracker or reporting tool that replaces a scattered manual routine with one automatic view. The paired lines let you answer the reader's real objections in their own words on the left, then show the resolved version on the right, which lands harder than a plain feature list at the bottom of the page.
A natural flow around it on a Marketing Pro page:
Before
After
The two column frame fits any current state versus improved state pairing:
Tip: keep both columns at the same line count and similar length so the panel reads as an even comparison rather than a loaded one.