Search blocks by description or jump to a page.
A project teaser card showing a Placeholder image, a one-line problem statement, a headline result figure, and a read-case-study link.
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
Case Study Card shows three project teasers as cards, each with a Placeholder image, the project name and kind, a one-line problem statement, a prominent result figure, and a read-case-study link. The problems are concrete: Ledger buried the numbers behind four levels of nav; Tend lost first-time users before a single log; Field Notes had three platforms with no shared code. The results are equally specific: +28% activation, 11 screens down to 5, 48 components shipped.
Studies are one array of objects. The problem-plus-result pairing is the distinctive choice: it tells visitors what was wrong before they commit to reading the full case.
Reach for this block as a case-studies section on a homepage or a dedicated work page. The installer swaps the project names, problem statements, result figures, and links for their own documented work.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product design case study index. Other uses:
Tip: the problem statement is what earns the click; a vague one like improved user experience loses to a specific one that names what was actually broken.