shadcn.io is not affiliated with official shadcn/ui
Trophy Hero Awards Block for React
An award as a hero for a voice platform: the headline, one sentence, a Shine Button and three judging figures beside a drawn trophy on a plinth with four category chips in front.
Installation
Overview
An award-led hero for React with Base UI. Between solid rails the block is a split with a divider. At the start are the headline ("Zephyrine is Voice Platform of the Year"), one sentence naming the programme and how many platforms it beat, a Shine Button to the jury's note and three figures from the judging in a description list (platforms entered, jurors, criteria). At the end, in a hairline frame with + marks on its corners, a trophy is drawn on a stepped plinth under a soft glow in the foreground tone, with the four categories it also won as small chips in front. It differs from the centred award hero in the hero blocks: here the copy leads at the start and the award is a drawn object, not a rank plaque. It is built from Shine Button, Badge, Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The award, programme and figures are made up for the example: replace them with your own.
FAQ
Where does the button go?
It links to #: point it at the jury's note or the announcement. It is the page's one primary control and is a Shine Button on every base, so it can be your router's link.
Can I change the trophy?
The trophy is a list of paths at the top of the file (TROPHY), each marked body, line or solid; edit or replace them and keep the 160 by 200 box. The plinth's name plate is left blank on purpose. To show a photo of the real trophy instead, swap the drawing for an img with an empty alt, since the award is already in the text.
What are the chips?
The other categories won at the same programme, in a real list named "Also won at the Basaltworth Prize". Each has a small drawn mark and the category in text. Edit ALSO to change them; keep four or fewer so they sit in two rows on a phone.
Are the figures counted?
They are typed in FACTS, and the number of platforms in the lead sentence reads from the same value, so they always agree. They are example figures, not real results.
Related
- Pro
Featured Plaque Awards
One featured awardOne grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.
- Pro
Ceremony Scene Split Awards
One featured awardAn award told as a scene for a video-call app: a drawn ceremony stage with a lectern and an audience in a frame beside the award's name, a sentence and a description list ending with who accepted it.
- Pro
Centered Award Badge Hero
Logos and social proofA compact centered hero led by an award plaque in a hairline frame, with a headline, a Shine Button and an outline button, then one band of three more recognitions.
- 213Pro
Three Step Podium Awards
Rankings and scoresA 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.
- 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
Raised Card Showcase Awards
Cards and gridsThree awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.