With Tabs
Tabbed feature panels that swap content and visuals as visitors switch tabs. Organizes many capabilities into one compact, tidy section that stays readable.
Tabbed feature panels that swap content and visuals as visitors switch tabs. Organizes many capabilities into one compact, tidy section that stays readable.
Search blocks by description or jump to a page.
With Tabs is a two-part feature section. A centered heading and subheading sit at the top, followed by a row of icon-labeled tab buttons on desktop or a dropdown selector on mobile. Below that a full-width card splits into two columns: the left holds the active tab's title, a short description, and a bulleted list of benefits; the right fills with a matching image. Switching tabs swaps both the copy panel and the image in place.
Each tab is an independent data record with its own title, icon, description, benefit list, and image, so you can rewrite any of those without touching the others. The number of tabs is flexible too: the demo ships four, but you can add or remove entries from the array and the tab row and dropdown adjust automatically.
Reach for this block when a property technology or real estate platform needs to explain several distinct capability areas without sending visitors to separate pages. It suits a product overview section where each tab might cover search tools, market analytics, compliance features, or listing infrastructure. Compared to a plain card grid, the tab pattern keeps the page compact and lets visitors zero in on the category they care about rather than scanning everything at once.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The clearest fit is a set of product capability areas, one per tab, each with a short explanation and a supporting screenshot or photo. A few other ways to use the layout:
Tip: keep benefit lists to three or four items per tab so the copy panel stays balanced with the image and neither side feels crowded.