shadcn.io is not affiliated with official shadcn/ui
Three Step Podium Awards Block for React
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 React with Base 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.
Related
- Pro
Placement Rosettes Awards
Badges and sealsFour placement columns for a dog-show manager, each opening with a drawn rosette for first, second, third or highly commended, with a derived count and the results beneath.
- Pro
Laurel Display Awards
Badges and sealsA band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.
- Pro
Medal Count Awards
Rankings and scoresAn Olympic-style medals table for a league-tables service: seven product lines ranked by gold, then silver, with drawn medal heads, a total, a stated ranking rule and a top-line callout.
- 213Pro
Leaderboard Podium Features
Metrics and chartsA leaderboard: a podium of the top three at different heights in foreground tones, set on the rule of a ranked table of eight with trend arrows, and a segmented control that ranks by adoption or by speed.
- Pro
Glass Trophy Case Awards
Themed formatsA glass trophy cabinet drawn in SVG with two shelves, eight trophies of different silhouettes and an engraved plaque under each, with the shelves, awards and programmes counted from the list.
- Pro
Class Plaques Hall of Fame Awards
People and teamsA hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.