Numbered Alternating Rows Features Block for React

Edit the four step objects (CAPTURE, GROUP, REVIEW and DECIDE) at the top of the file: each has a numeral, a title and a description. Each band takes its drawing as its child, so swap a drawing by replacing the component inside its Row. Add a row by copying one and passing reverse to alternate it.

The outlined numbers are drawn by a pseudo-element from a data-numeral attribute, so they are never read by a screen reader or measured as low-contrast text. The order is in the list: the rows are an ordered list.

The text is first in the page's order in every row. In the second and fourth rows the drawing is placed at the start with grid positions on lg, so the reading and focus order never change. The split divider moves with it.

They are decoration: hidden from assistive technology and inert, with the facts in the paragraph beside them. Nothing in them takes focus. The one diagram with direction, the sources merging into the feed, is drawn left to right in every language, because it is a picture and not text.

Every band is one column: the numeral, the title, the paragraph, then the drawing at h-44. A rule separates each band from the next, and nothing scrolls sideways at 320 pixels.

Yes. Drawings use card, background and foreground tokens, and the one filled chip is in foreground. There's no dark scope and no fixed colour, so the section is light on a light page and dark on a dark one.