shadcn.io is not affiliated with official shadcn/ui
Sticky Title Card Case Study Blog Block for Radix UI
A customer story told as a post: a sticky title card with a typographic cover at the start and, across a split divider, Challenge, Solution and Results bands whose three before-and-after pairs are thin bars with counting figures.
Installation
Overview
A case-study block for React with Radix UI, written for Plainfield Stories, a customer-stories site, about a nine-shop bakery. At the start, a title card that sticks as the story scrolls: the headline, a one-line dek, a "Case study 07" cover set in display type, two facts about the customer and the author's byline. At the end of a split divider, three bands: Challenge and Solution in a few sentences each, and Results, which holds three before-and-after pairs. Each pair is two thin bars on one scale (the larger figure fills the track) with the "after" figure counting up once as it scrolls into view and the change worked out from the two numbers, so the headline's percentage and the figures never disagree. It's built from Avatar, Counting Number and Guides. For customer stories, project write-ups and any post that ends on measured results. The bakery and its figures are invented example data.
FAQ
How do I change the customer and the figures?
Edit RESULTS at the top of the file: each pair has a label, a before and an after figure and the unit after them. The bar lengths, the "−61%" lines and the percentage in the headline (taken from the first pair, WASTE) are all worked out from those numbers. The customer's facts are FACTS, the story text sits in the three bands, and the author is AUTHOR.
How are the bars scaled?
Within a pair, the larger of the two figures fills the whole track and the other is its share of it, so a pair always shows the real proportion between its own two numbers. Pairs use their own scale, because their units differ; the percentage beside each is what compares them. The bars are decoration: the figures and the change are text.
Does the counting number respect reduced motion?
Yes. The "after" figures count up once, when the Results band scrolls into view, and show their final value at once with reduced motion. A screen reader reads the final figure, never the count.
What does sticky mean here?
From lg the title card sticks near the top of the screen while the bands beside it scroll past, as long as the page is taller than the card. On a phone the card comes first and the bands follow; nothing sticks.