Annotated Screenshot

About this block

Annotated Screenshot explains one screen properly. A browser mockup of the dashboard carries three numbered marker dots pinned to its regions, sidebar, chart, and an anomaly row, and a sticky legend beside it decodes each number with a title and sentence. The markers sit on the mockup edges like documentation callouts, and the legend order matches the visual flow.

The annotations are one array, and each Marker is positioned with a class string on the region it labels. Redraw the mockup to your actual money screen and move the markers to whatever earns the explanation. Three callouts is the budget, five turns the screen into a diagram of itself.

When to use

Reach for this block when one screen carries the product and deserves a guided reading, dashboards, editors, inboxes. It answers what am I looking at faster than a video and deeper than a bare mockup. Use tour-steps-with-screens when the story is a sequence, this block when it is a place.

A natural flow around it on a Marketing Pro page:

Before

• Heroes that showed the screen small, this section reads it closely

After

• Features expanding the capabilities behind each callout
• CTAs for readers who want the screen with their data on it

What you can display

One strong use is the daily dashboard with its three load bearing regions. Other annotated screens:

• The editor. Canvas, inspector, and publish flow for a creation tool.
• The inbox. Queue, context panel, and macros for a support product.
• The settings page. Permissions, audit, and SSO regions for an enterprise security story.

Tip: annotate behaviors, not furniture, the anomaly flag earns a marker where the navigation bar never will.