shadcn.io is not affiliated with official shadcn/ui
Unit Chart Social Impact Awards Block for React
A unit chart of four volunteer programmes for a volunteer platform: a row of twenty person glyphs for each, filled to the people reached at 100 people a glyph, with the award each programme won.
Installation
Overview
A unit chart for React with Base UI. A start-aligned header carries the total, counted from the list ("4,100 people reached"), and under it four rows share their hairlines, rail to rail, the last one ending the block. Each row sets a programme's name and its figure ("1,200 apprentices") beside a line of twenty person glyphs drawn in SVG: every glyph is 100 people, and as many as the figure holds are filled in your theme's foreground (12 of 20 for 1,200). At the end of the row is the award the programme won and its year. Ten glyphs to a line on a phone, twenty from sm. The page's rails and top rule come from the Guides spine. It's built from Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The Wrenford Awards and every figure are made up for the example: swap in your own programmes.
FAQ
How do I change the figures?
Edit PROGRAMMES at the top of the file. Each entry has a name, the people reached, the unit that follows the number, and the award with its fixed year. Keep people a multiple of PEOPLE_PER_GLYPH (100) so every glyph is whole; the filled glyphs, the header total and the figure in each row are all computed from it, so nothing is typed twice. To change the scale, change PEOPLE_PER_GLYPH, and GLYPHS for the number of glyphs in a row.
Are these real awards?
No. The Wrenford Awards are a made-up programme and Commonweal a made-up platform, and the programmes and figures are invented for the example. Replace the award names with your own, and use an award body's official mark only where its rules allow it.
How does a screen reader read a row?
The glyphs are a drawing hidden from assistive technology, so the figure in the text carries the number: the programme is a heading, followed by "1,200 apprentices", then the award and the programme's name and year as a description list with visually hidden terms. Nothing depends on seeing the filled glyphs.
How do I draw a different glyph?
Glyph is a 16 by 24 SVG of a head and shoulders that fills its grid cell, filled with the foreground or a faint mix of it. Replace its two shapes with any drawing in the same box, such as a house or a leaf, and the rows and the counts keep working.
How does it fit on a phone?
Each row stacks: the name and figure, then the glyphs in two lines of ten, then the award. From sm the glyphs run in one line of twenty, and from lg the name, the glyphs and the award share one row. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the glyphs fill from the end, the way the row reads.
Related
- Pro
Impact Metrics Awards
Lists and tablesA ruled list of three awards for a CI/CD service, each with a drawn mark, the programme and year at the start and, at the end, the three measured results it recognised with the change in words.
- Pro
Emissions Chart Awards
Charts and figuresA split for a carbon-accounting tool: three facts at the start and, in a framed figure at the end, a stacked bar chart of yearly emissions falling over five years with a drawn flag above each year an award arrived.
- Pro
Category Counts Awards
Charts and figuresNine count tiles on shared hairlines for a sports-league manager: a drawn category glyph, the count in large type, its share of all awards and a bar scaled to the largest, with the largest outlined.
- Pro
Big Numbers Awards
Charts and figuresFour display-size figures for an inventory-counting app on shared hairlines (awards won, programmes, categories led and years running), counted up once on view and all derived from one typed list of awards.
- Pro
Season Tracker Awards
Charts and figuresA season tracker for a habit tracker entering an awards programme: six categories in a framed figure, each with a progress bar of entries against its target, a pace tick, the count and an Ahead, On pace or Behind chip.
- Pro
Before After Awards
Charts and figuresThree awards for a help desk in cells on shared hairlines, each with two results drawn as before and after bars, and a segmented control that switches the large figure between the year before and the year of the award.