shadcn.io is not affiliated with official shadcn/ui
Prize Purse Startup Awards Block for React
A prize-purse ledger for a founders' toolkit: one cell for each prize with the prize in large type, the competition, where the team placed and a derived top share, and the prizes summed at the foot.
Installation
Overview
A prize-purse ledger for React with Base UI. A start-aligned header gives the sum of the prizes ("$185k and counting"), counted from the list, and under it one cell for each prize, the cells' corners overshooting. A cell opens with the prize in large type (above the competition on a phone, at the start of the row from sm), then the competition, the award and the year, then where the team placed ("Placed 1st of 64 teams") and the share that puts it in, derived from the two ("Top 2%"). At the foot a line adds the prizes up. The page's rails and top rule come from the Guides spine. It's built from Guides and your theme's tokens. The prizes, the Opalton Cup, the Maplefield Guild, Kickstand and the placings are made up for the example.
FAQ
How do I change the prizes?
Edit PRIZES at the top of the file: each has the competition, the award, the purse in dollars, the place the team took, the number of teams that entered and the fixed year. The sum in the header and at the foot and the "top" share are computed from them.
How is the top share computed?
It is the placing over the number of teams as a percentage, rounded up, so first of 64 is the top 2% and second of 40 the top 5%. Rounding up never overstates a result. The helper topOf is at the top of the file.
Are these real prizes?
No. The Opalton Cup, the Maplefield Guild, Kickstand and every amount are made up for the example. Replace them with your own prizes and say what each was for.
Why is there space between the cells?
Each cell's corners overshoot its box, so the cells keep a 1.5 rem gap to stop neighbouring marks touching. The list is inset from the rails for the same reason.
How is it marked up?
The prizes are an ordered list named Prizes won. Each cell has the amount first, with a hidden word so it reads "$100,000 prize", then the competition and award as a heading, then the placing. Amounts and placings sit in bdi elements so they keep their order in a right-to-left layout.
Related
- Pro
Giving Thermometer Philanthropy Awards
Charts and figuresA giving thermometer for a charity-checkout widget, filled to the year's total with ticks at each quarter of the goal and a flag where a prize grant arrived, beside a ledger table of causes and amounts.
- Pro
Unit Chart Social Impact Awards
Charts and figuresA unit chart of four volunteer programmes for a volunteer platform: a row of twenty person glyphs for each, filled to the people reached at 100 people a glyph, with the award each programme won.
- Pro
Client Wins Awards
Lists and tablesA split for a supply-planning tool: the count of awards its customers won this year and three facts at the start and, at the end, a ruled ledger of seven wins with a monogram, the award, the programme and a reported result.
- Pro
Total Tally Awards
Lists and tablesA scoreboard table for an accounting app: years down the side, the three tiers (grand prize, winner, finalist) and a total across, with column totals in the foot row, all counted from one list of entries.
- Pro
Paper Cards Research Awards
Cards and gridsSix award-winning papers for a lab notebook as cards on shared hairlines: venue, title, year, the award and a mini column chart of citations per year, with papers, citations and h-index derived in the header.
- Pro
Accordion Awards
Lists and tablesSix awards as full-width bands that open one by one, each revealing a drawn mark, the facts behind the award and the jury's citation.