With Comparison
A feature block that places before and after states next to each other. Use it to show the change your product brings and let the difference speak plainly.
A feature block that places before and after states next to each other. Use it to show the change your product brings and let the difference speak plainly.
Search blocks by description or jump to a page.
With Comparison is a two-column feature section. The left column holds a card split into two stacked lists: a "Before" list where each item is marked with a small muted dot, and an "After" list where each item gets a primary-colored checkmark. The right column is an interactive image viewer where a draggable vertical divider reveals the "after" image over the "before" image as the user slides it left or right. A centered call to action button sits beneath both columns.
The heading, subtitle, and both feature lists are independent text. You can add or remove items from either list, swap the two images for screenshots or illustrations from your own product, and drop the button label to match your funnel step. The divider starts at 50% and nothing in the layout depends on a specific item count.
Reach for this block when you need to show a clear shift in state, not just list features in isolation. For a project management workspace it works well to contrast a fragmented, manual process against the streamlined version your tool provides, letting visitors feel the gap before they read a word. Compared to a plain feature comparison table, this block adds the interactive image reveal which earns attention and invites exploration on its own.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Replace the placeholder images and copy with real before and after states from your own product. A few angles that work well:
Tip: use images with strong visual contrast between the two sides so the slider reveal feels satisfying rather than subtle.