Sticky Headline Scroll List Features Block for React

Edit the eight feature objects at the top of the file: each has a title and a description. Each row takes its mockup as its child, so swap a mockup by replacing the component inside its Row. The numbers come from each row's place in the list. Keep the rows short: eight at this size already run past one screen, which is what lets the header wait.

Both are links (href="#"): point the first at your sign-up and the second at your guide. The first is a Shine Button: a band of light sweeps across it once on hover and keyboard focus. Each button renders the link it's given with render, with nativeButton={false}.

From lg the header's content is sticky below the top of the viewport, so it stays in view while the longer list scrolls past. Below lg it simply comes first, and the rows follow.

Yes: they are a description list, with each label under its figure but the figure first in the markup's reading order, so a screen reader hears "8, paved roads". Figures with a unit are wrapped so a right-to-left layout keeps "11 min" and "300+" together.

The header comes first, then the rows. On a phone each row is its number and text, with the mockup under the text; from md the mockup moves to the end of the row. Nothing scrolls sideways at 320 pixels.

Yes. Mockups use card, muted and foreground tokens, and the toggles and chips are in foreground, never primary. There's no dark scope, so the block is light on a light page and dark on a dark one. Only the Shine Button carries the primary colour.