shadcn.io is not affiliated with official shadcn/ui
Impact Metrics Awards Block for Svelte
A 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.
Installation
Overview
An impact metrics list for Svelte with Ark UI. A short header and a tally counted from the data ("3 awards, 9 measured results") sit above a ruled list of three awards running rail to rail. At the start of each row is the award: a small drawn mark (a scalloped seal, a shield or a medal), its name, the programme and year, and one sentence on what it recognised. At the end are the three results behind it, each a label, the figure for the year of the award and the change in words with an arrow ("down 57%, from 14 min"). On a phone the results sit under the award, one per line. 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 CSS transitions for the entrance. The awards and figures are made up for the example: replace them with your own, measured the same way.
FAQ
How do I change the awards and the results?
Edit AWARDS at the top of the file. Each award has a name, a programme, a fixed year, a recognised sentence, a shape for its mark and three metrics. A metric is a label, the before figure (the year before the award), the after figure (the year of it), its unit and whether it is a rate. The header's tally is counted from the same list, so it can't disagree with the rows.
How is the change worked out?
From the two figures, never typed. A rate (a share in per cent) changes in points, so 41% to 78% reads "up 37 points"; anything else changes in per cent of the figure before, so 14 minutes to 6 reads "down 57%". The direction is a word and an arrow, never a colour, and the arrow doesn't mirror in a right-to-left layout.
Does an award prove the result?
No, and the block doesn't claim it. It sets what the award recognised beside the figures measured over the same year, labelled as the company's own, so a reader can judge both. Say how you measured in your own copy, and link to the method if you have one.
How are the seal, shield and medal drawn?
Each is an inline SVG in a 64 by 64 box: an outline on a faint fill, a detail line and a star, all in your foreground colour with a 1.5 pixel stroke that stays that thick at any size. The marks are decoration and hidden from assistive technology; the award is always in text beside them. To add a shape, add an entry to MARKS with its three paths.
How does it read to a screen reader?
The rows are a list named "Awards and the results behind them". Each opens with the award as a heading, then the programme and year, then the results as a description list: the label, the figure and the change ("down 57%, from 14 min"). Years and figures sit in bdi elements so they keep their order in a right-to-left layout.