Annotated Screen
A single captioned product screen beside five numbered decision notes, each naming a screen region and the reasoning behind the call.
A single captioned product screen beside five numbered decision notes, each naming a screen region and the reasoning behind the call.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
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.
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
After
One strong use is the annotated dashboard breakdown. Other annotation layouts:
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.