Case Study Card
A project teaser card showing a Placeholder image, a one-line problem statement, a headline result figure, and a read-case-study link.
A project teaser card showing a Placeholder image, a one-line problem statement, a headline result figure, and a read-case-study link.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? 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.