shadcn.io is not affiliated with official shadcn/ui
Breakthrough Cards Innovation Awards Block for React
Three breakthrough awards for a speech-to-text API, each beside a tiny greyscale drawing of what won (a diff, a stack of toggles, a latency graph) with a What was new sentence.
Installation
Overview
A set of three breakthrough cards for React with Base UI. A centred header counts the awards from the list, and under it three cards sit in cells with their corners overshooting. Each card shows the thing that won in a framed window drawn in greyscale: a diff of a transcript with one line removed and one added, a stack of three toggles, and a graph where the delay stays flat while the old curve climbs. Under the drawing, the award is a heading with the programme and year, and a "What was new" sentence says what changed. Three across from lg, one column below it. The page's rails and top rule come from the Guides spine. It's built from Guides, small SVG and CSS shapes and your theme's tokens. The Flintfield Prize, Mandrake and the breakthroughs are made up for the example.
FAQ
How do I change the breakthroughs?
Edit BREAKTHROUGHS at the top of the file: each has a name, the whatWasNew sentence, the fixed year and the drawing (diff, toggles or graph). The header counts the list. To add a drawing, write one more small component in the same Window and add it to drawingOf.
What are the drawings, and can screen readers see them?
They are pictures of a screen, built from boxes and one SVG in the foreground and faint mixes of it, so they follow your theme. They are hidden from assistive technology on purpose: what they show is said in the text under them. Replace one with a screenshot as an img with a real description if you prefer.
Are these real awards?
No. The Flintfield Prize and Mandrake are made up for the example, and so are the breakthroughs. Use your own awards, and an award body's official mark only where its rules allow it.
Related
- Pro
Benchmark Table Technology Awards
Lists and tablesBenchmarks as awards for an API gateway: a table with a row for each test, the award and year, two bars against the next best result, the measured figure and a derived lead such as 2.3x faster.
- Pro
Specimen Cards Design Awards
Cards and gridsFive specimen cards for a design-handoff tool, each with a small greyscale drawing of its discipline (type, grid, motion, colour, icons), the award, the programme, the year and the jury.
- Pro
Patent Steps Awards
TimelinesThree patents as full-width bands, each with its title, register number and jurisdictions as code badges and a read-only Steps stepper at its current step, under a header that counts how many are granted and pending.
- Pro
Before After Awards
Charts and figuresThree awards for a help desk in cells on shared hairlines, each with two results drawn as before and after bars, and a segmented control that switches the large figure between the year before and the year of the award.
- Pro
Spotlight Dialog Awards
Reveal and browseA 3 by 2 grid of award tiles that each open one centred dialog with the full details, a counter and Previous and Next, with arrow keys cycling.
- Pro
Asymmetric Mosaic Awards
Cards and gridsSeven awards for a type marketplace on a 4-column hairline grid with different spans: a 2 by 2 lead with a large drawn trophy, two 2 by 1 runners-up and four small cells.