shadcn.io is not affiliated with official shadcn/ui
Aggregate Media Coverage Awards Block for Ark UI
A split with three counted figures (articles, publications, combined audience) and a ranked list of publications with article counts and derived bars, for a PR-analytics tool; no headlines.
Installation
Overview
An aggregate media-coverage block for React with Ark UI. A split behind a solid divider: at the start a title, a sentence and three figures (articles, publications and a combined audience) that roll up once on load and are counted from the list; at the end the publications as a ranked list, each with its article count and a bar sized against the busiest. There are no headlines, which is the point: this block answers "how far did it travel" where the press ledger answers "what did it say". The page's rails and top rule come from the Guides spine. It's built from Counting Number, Guides and your theme's tokens. The publications and the audience estimates are made up for the example: replace them with the counts your monitoring reports.
FAQ
How do I change the publications?
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.
How is the combined audience worked out?
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.
How are the bars sized?
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.
What moves, and what happens with reduced motion?
The three figures count up once when the page loads, and the block fades up. With reduced motion they simply show their final values.
How do screen readers read it?
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.