Search blocks by description or jump to a page.
A centered header above one annotated product window with numbered callout badges, then a four column legend mapping each number to a feature.
The source for every Marketing block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Mockup With Callouts centers a heading and a one line subheading over a single annotated app window. The window carries a title bar with three decorative dots, a sidebar of navigation items, and a main pane holding a search toolbar, a bar chart card, a list of running automations, and a sync status line. Four numbered badges pin to those surfaces, and below the window a four column legend maps each number to a feature name and a one sentence explanation.
The mockup and the legend share the same numbering but are otherwise independent. You can rewrite the heading and subheading, change the sidebar labels, chart bars, automation rows, and sync copy inside the window, and swap any of the four legend entries without disturbing the layout. Keep the badge numbers aligned between the window and the legend so the annotations stay easy to follow.
Reach for this block when one screen already tells most of your product story and you want to point at the parts that matter rather than describe them in prose. It suits a dashboard, an inbox, or any dense workspace where a plain screenshot would leave visitors guessing what to look at. The numbered callouts turn a static image into a guided tour, which works well mid page after a hero has set the broad promise and before you move into pricing or proof.
A natural flow around it on a Marketing Pro page:
Before
After
The natural fit is a single product surface with four features worth calling out. A few other ways to use the frame:
Tip: keep each legend sentence to a single clear idea so the numbers stay a quick reference rather than a second paragraph to read.