Sticky Title Card Case Study Blog Block for React

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.

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.

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.

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.

The title card comes first with the headline above the cover, then a rule, then Challenge, Solution and Results one under the other, with the three pairs stacked in a single column. Nothing scrolls sideways at 320 pixels.

Yes. The split, the bands and the divider mirror. The percentages and the figures are isolated with bdi, and the bars keep a left-to-right fill because they are charts. The cover is artwork and never mirrors.