Before and After
Before and after cards listing the same workflow as crossed off pains and checked wins.
Before and after cards listing the same workflow as crossed off pains and checked wins.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Before and After is a two card comparison section. A centered heading and subheading introduce the contrast, then two cards sit side by side in a grid. The left card is muted and carries a "Before" label above a list of five pain points, each prefixed with an X icon. The right card is lighter with a ring and carries an "After" label above a matching list of five outcomes, each prefixed with a check icon. Two call to action buttons sit centered below the grid.
Each list is driven by a plain array of strings, so you can swap in your own items, add or remove rows, and rewrite the heading copy without touching the card structure. The two buttons are independent and accept any label and destination you need.
Reach for this block on a landing page where the core promise is relief from a painful status quo. It works well for healthcare scheduling products where the before state is familiar friction (missed appointments, phone tag, manual reminders) and the after state is calm and automatic. Because the layout keeps both columns in view at once, it lets a prospective customer map their current week to the improved one without scrolling, which makes it sharper than a simple feature list for emotionally loaded switches.
A natural flow around it on a Marketing Pro page:
Before
After
Replace the demo copy with the real before and after your customers describe in sales calls or support tickets. A few other angles:
Tip: keep both lists to the same number of items and make each pair address the same problem so readers can scan across columns naturally.