About this block

Annotated Screen puts one shipped product screen on the left as a large Placeholder with a dated caption, beside five numbered decision notes on the right. Each note names a screen region (Header balance figure, Table row density, Sidebar section order) and explains a call that is easy to miss, so the section shows the reasoning most portfolios leave out.

Annotations are one typed array rendered as numbered badges with a region title and body; the media column takes 1.1fr so the screen leads without dominating. The notes are specific on purpose: rows are 40 pixels because finance users chose scanning speed over white space, which reads as evidence rather than opinion.

When to use

Reach for this block on a case study page when a single screen carries a lot of thinking that deserves to be spelled out. The installer swaps the screen Placeholder and caption, then rewrites the five region notes to name the decisions a reviewer would otherwise miss.

A natural flow around it on a Portfolio Pro page:

Before

• Case study sections

After

• Process sections
• Contact sections

What you can display

One strong use is the annotated dashboard breakdown. Other annotation layouts:

• Onboarding flow. Number the notes across a multi-step screen and explain one decision per step.
• Component teardown. Point the notes at states, spacing, and copy inside a single component.
• Landing page critique. Adapt the regions to hero, proof, and call to action for a marketing case.

Tip: keep each note about a decision that cost a debate or a test; obvious observations dilute the section, so cut any note a visitor could have made themselves.