shadcn.io is not affiliated with official shadcn/ui
Compact Badge Strip Awards Block for Svelte
A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.
Installation
Overview
A compact awards strip for Svelte with Ark UI, for the spot beside a pricing table or under a hero where there is room for one line. A framed bar sits inset from the page rails, its lines running a little past the corners with + marks. Inside, a bold lead ("Award-winning experimentation") is the heading, four outline badges follow on one line, each with a small drawn laurel or medal, the award and its year, and a muted tally counted from the list ("4 awards, 3 programmes") ends the bar. On a phone the lead sits above and the badges wrap. It is built from Badge and Guides. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.
FAQ
How do I change the awards and the tally?
Edit AWARDS: each has a title, a programme, a year and a drawing (laurel or medal). The tally is counted from the list: the number of awards and of different programmes. The programme is read out by screen readers after each award, but kept off the line to save width.
How are the laurels and medals drawn?
Each is SVG in the badge's text colour, 14 px tall and hidden from assistive technology. The laurel is the same kit as the other awards blocks (a stem and leaf pairs, mirrored for the other side); the medal is a ribbon and a ringed disc.
Are these real awards?
No. The programmes are invented for the example. Use only recognition you have received, with its real name.
What if I have more than four awards?
The badges wrap onto a second line in the bar. Past six, use the badge wall or the marquee instead: this strip is for a handful.