Magazine Editorial Features Block for React

Edit LEDE for the opening paragraph and BODY for the paragraphs before and after the figure; each is a plain array of strings, so the story can come from your CMS. The drop cap is the first letter of LEDE itself, so the text stays whole for screen readers, search and copying.

The bars are plain HTML in a list: each release is a row with its name and its value in words ("300 ms"), so nothing depends on the drawing. The bars are decorative and hidden from screen readers, and the figure's caption says what is measured. Edit RELEASES; the bar widths and the highlighted fastest release come from the numbers.

The body uses CSS multi-column layout from sm up, and the figure uses column-span: all, so the text above it balances into two columns, the figure runs across both, and the text below flows into two more. Below sm the container is one column and the figure simply sits between paragraphs.

A raised panel inside a muted shell keeps it separate from the story in both a light and a dark theme without a coloured fill. It is a labelled aside landmark with its own heading, so a screen reader can jump to it or skip it, and its features are a real list.

The headline and the aside fade up once when the page loads, with a CSS transition, and the drop cap inks in from the top as the page loads. With reduced motion the transitions are off, the cap is simply there and the section appears at once.

Everything stacks in one column: headline, story, the figure between its paragraphs, then the aside. The figure's rows keep their name, bar and value on one line down to 320 pixels, and nothing scrolls sideways.