Search blocks by description or jump to a page.
Three projects each shown as a paired desktop and mobile frame with a note explaining the specific adaptation decision behind the small screen.
The source for every Portfolio block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Responsive Pairs shows three projects, each as a paired desktop and mobile frame: a wide Placeholder beside a tall aspect-9/16 phone frame, with a note underneath naming the specific adaptation call. The Ledger dispatch board collapses to an exceptions feed, Fieldset checkout becomes one guided step, Harbor analytics trades detail for direction on the small screen.
The three pairs are one typed array. The argument sits in the lede and the notes: the phone layout is designed alongside the desktop one, never squeezed out of it after the fact, and each note names what the small screen owes its user rather than what it drops.
Reach for this block on a design portfolio or case study to prove responsive craft, where a reviewer wants to see that mobile got its own thinking. The installer swaps the three project names, the six Placeholder frames, and the adaptation note per project.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the desktop and mobile craft pairing. Other paired-frame layouts:
Tip: a note that names what mobile keeps, not just what it hides, reads as design intent rather than a cut.