Aggregate Media Coverage Awards Block for React

Edit OUTLETS at the top of the file. Each publication has a name, the number of articles it ran, its own estimate of readers in thousands and a lettering string for its wordmark. Keep the list ordered by article count, then by name. The three figures and every bar are computed from it, so nothing else needs editing.

It's the sum of each publication's own readers estimate, in millions, with no allowance for readers who see more than one. The note under the figures says so. Treat it as an upper bound, and replace it with a deduplicated figure if your analytics provides one.

Each bar is the publication's article count as a share of the busiest publication's, so the first bar is always full. They are set through a CSS variable and drawn in a fixed direction in every layout, and the count is written beside the name, so the bar is never the only way to read it.

The three figures count up once when the page loads, and the block fades up. With reduced motion they simply show their final values.

The figures are a description list, so each is read as its label then its number ("Articles, 33"). The publications are an ordered list named for its order, each item reading the rank, the name and the article count. The bars are drawings hidden from assistive technology.

The three figures sit side by side in one row, each with its label under it, and the ranked list follows under a hairline. From lg the figures stack in the start column and the list takes the end column behind the divider. Nothing scrolls sideways at 320 pixels.