Numbered Question Features Block for React

Edit QUESTIONS at the top of the file: each has a question, an answer, a feature (the link's text) and an id. The four drawings are separate components, placed in the four rows at the bottom of the file, so swap a drawing by replacing the component inside its Row.

The rows are an ordered list, so the order is in the markup. The "01" to "04" you see are decoration, hidden from assistive technology so they aren't read twice, and they come from the row's position, so adding or removing a row renumbers them.

No. Each is a hidden, inert picture of the answer, and the answer is in the sentence beside it: the canary slider, for instance, is described as "send a release to 1% of traffic and widen it". The drawings are never focusable.

Each is a link (href="#") to the feature's page, with an arrow that points the other way in right-to-left languages and nudges on hover (not with reduced motion).

Each row stacks: the number, then the question and answer, then the drawing at a fixed h-28. From md the row is three columns, with the drawing at the end. Nothing scrolls sideways at 320 pixels.

Yes. The drawings use card, muted and foreground tokens, and the only filled elements are one chip and one fill in foreground, never the primary colour. There's no dark scope, so the block is light on a light page and dark on a dark one.