Step Tabs
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
Tabs labeled Step 1 to 3 where each panel pairs step copy with a small app mockup.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Step Tabs opens with a centered heading and a short subheading, then renders a tab strip labeled Step 1, Step 2, and Step 3. Clicking a tab reveals a two-column panel: the left side shows a step title, a paragraph of detail, and a short checklist of three bullet points each marked with a check icon. The right side shows a bordered app window mockup whose inner content changes per step, moving from an integration list, to a campaign calendar, to a metrics dashboard with a bar chart.
The heading, subheading, and all three steps are independent pieces of copy. You can rewrite each title, description, and checklist without touching the layout. The three mockups are inline SVG illustrations, so they stay sharp at any size and adapt to light and dark themes automatically.
Reach for this block when your product has a short, sequential setup flow and each step benefits from a visual aid. It fits the "How it works" section of an AI assistant product landing page particularly well, where showing the interface at each stage is more convincing than a plain list. Compared to a static three column card row, the tab structure lets you give each step a full paragraph and a dedicated mockup without overwhelming the page at once.
A natural flow around it on a Marketing Pro page:
Before
After
Each tab panel is a self-contained mini-story, so the content can go well beyond the demo copy. A few directions worth considering:
Tip: keep each checklist to three short phrases so the left and right columns stay roughly the same height and the panel feels balanced.