With Images
Alternating rows of feature copy beside supporting images. A reliable pattern for explaining several capabilities while keeping the page lively and balanced.
Alternating rows of feature copy beside supporting images. A reliable pattern for explaining several capabilities while keeping the page lively and balanced.
Search blocks by description or jump to a page.
With Images is a stacked feature section. A centered heading and a short supporting paragraph sit at the top. Below that, each feature occupies its own two-column row: copy on one side and a rounded image on the other. Rows alternate left-right so the eye moves naturally down the page, and each copy block carries a title, a short description, and a "Learn more" button.
The heading, subheading, and each feature item are independent pieces. You can change the copy or swap the images without affecting the layout. The number of rows is driven by the features array, so adding or removing a row is a matter of editing that list.
Reach for this block when you need to walk visitors through several distinct capabilities in order, and a plain list or icon grid would not do them justice. For an AI assistant product it works well as the main feature walkthrough: each row can show a conversation interface, a settings panel, or an integration screen with a sentence or two of context beside it. It gives each capability breathing room that a grid cannot, while staying more compact than a full screen per feature.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each row pairs a short written explanation with a supporting visual. A few ways to fill that frame:
Tip: keep descriptions to two or three sentences so each row stays balanced and visitors can scan the whole section quickly.