Tabbed Showcase
A tabbed feature showcase with pill triggers for plan, track, and ship views, each pairing copy and a checklist with an app panel mockup.
A tabbed feature showcase with pill triggers for plan, track, and ship views, each pairing copy and a checklist with an app panel mockup.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Tabbed Showcase compresses three product stories into one compact section. A centered headline and lede sit above a row of rounded pill tabs, and each tab swaps in a two column panel: a short copy stack with a title, two supporting sentences, a small checklist, and a detail link on the left, and a framed app mockup on the right. Plan shows a mini board, Track shows a cycle chart over project progress rows, and Ship shows a release queue with drafted notes.
The tabs are plain data, so adding a fourth view or renaming the three that ship takes one edit to the array. Each mockup is its own small component built from theme tokens and inline SVG, which means you can swap any panel for a screenshot frame or a different illustration without touching the copy, the pills, or the other tabs.
Reach for this block when your product has a natural sequence of modes and you want to show all of them without tripling the page length. On a project management landing page, for example, a visitor can flip from planning to tracking to release in place, which reads as one connected workflow rather than three separate features. It works best midway down the page, after the promise is set but before pricing asks for a decision.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is one workflow shown stage by stage. A few other ways to use the frame:
Tip: keep the three copy columns close to the same length. The section swaps panels in place, so matched heights make the tabs feel like one surface instead of three separate pages.