Split With Image
A two column call to action with copy on one side and an image on the other. Balances message and visual to invite a signup or demo request.
A two column call to action with copy on one side and an image on the other. Balances message and visual to invite a signup or demo request.
Search blocks by description or jump to a page.
Split With Image is a bordered two-column card. The left column holds an outline badge, a bold headline, a short body paragraph, and a pair of buttons stacked on small screens and placed side by side on wider ones. The right column fills its half with an aspect-ratio-locked image that crops cleanly to any viewport width.
The badge label, headline, body copy, and button text are all independent strings, so you can swap them without touching the layout. The image swaps by replacing the src and alt attributes. If neither button is needed you can remove one or both without breaking the two-column grid.
Reach for this block at the end of a feature or product page when you want a visual anchor alongside the call to action. For an AI assistant product it works especially well after a feature walkthrough, where showing a screenshot of the interface beside the "Explore Features" prompt gives visitors a concrete reason to click. It carries more visual weight than a plain centered CTA but stays more focused than a full zigzag row because everything lives inside a single contained card.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block frames one focused action supported by a relevant visual. A few content directions that fit the layout well:
Tip: keep the body copy to two or three lines so the text and image columns stay balanced at mid-range viewport widths.