Alternating Chapters About Block for React

Each chapter is a constant at the top of the file (ONE, TWO, THREE) with its badge, title, paragraph, metric and measure (the figure and what it counts), and the quote with its quoteBy. The three rows are written out at the bottom, each with its drawing as a child and a flip that says which side the text takes, so adding a fourth chapter means adding a constant, a drawing and a row.

No. They are built from the same tokens as the rest of the page and hidden from assistive technology, because the text beside each one says what it shows. They follow the theme, light or dark, and use the foreground colour for their selected states so the page's primary colour stays free for its main action. Replace them with your own screenshots if you prefer.

Yes. In the document the text of every chapter comes before its drawing. On wide screens the drawing moves to the other side on alternate rows with grid placement alone, so tabbing and screen readers read the chapters in order; no order utility reorders anything.

Each is a figure with a blockquote and a figcaption naming who said it, so assistive technology reads it as a quotation with its source. The accent line beside it is decoration.

Each chapter stacks: its text first, then its drawing, with a rule from rail to rail between chapters. The drawings keep their size inside the column, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the sides, the quote's accent and the divider all follow the direction, and the metrics keep their digits in order.

A calendar year would make the story look out of date as soon as it ships. The chapters are placed by how long after the start of the company they happened; use dates if the date is the point.