shadcn.io is not affiliated with official shadcn/ui
Three Step Podium Awards Block for Svelte
A podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.
Installation
Overview
A podium for Svelte with Ark UI. A centred header, "Our proudest moments", sits over three steps in the order second, first, third. The steps stand on the block's lower edge, so the next block's top rule is their baseline. Each step is a hairline-framed block whose height is in proportion to its rank (three, two and one units) with its place as a large numeral; on top of it stands a drawn medal, SVG in the foreground tone and hidden from assistive technology (the first is the largest, double ringed, with a solid star), and above that the award, the programme and the year. The steps are an ordered list that reads first, second, third whatever the layout. The same three across on a phone, narrower. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.
FAQ
How do I change the podium?
Edit STEPS: each has an award, a programme, a year, a place for its medal, a column (the first sits in the middle), the step's height and the medal size. Keep the first in the middle and the heights proportional to rank.
Why does a screen reader hear first place first?
The list is in rank order, first, second, third, and the columns only place the first in the middle. Each heading carries a hidden "First place:" prefix, since the numerals on the steps are drawings.
Are these real awards?
No. Every programme and product here is made up for the example, and the trophies, rosettes and medals are drawn by the block, not copied from any award body. Replace them with your own recognition, and use an organiser's official artwork only if its rules allow it.
Are the years computed?
No. Each year is fixed in the data, so an award given in 2025 stays 2025. Years are wrapped in a bdi element so they keep their order on a right-to-left page.