Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Specimen Cards Design Awards Block for React Aria

Five 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A set of specimen cards for React with React Aria. A centred header carries a tally counted from the list ("5 disciplines, 31 jurors"), and under it five cards sit in cells with their corners overshooting. Each card holds a small specimen of its own discipline drawn in greyscale: a type specimen "Aa" over its guide lines, a column grid with blocks snapped to it, a motion curve with its handles, a row of swatches in foreground steps and a grid of icons. Under it the award is a heading, with the programme and year, what the product was awarded for and the size of the jury. Five across from lg; below it the cards are a snap row that scrolls sideways. The page's rails and top rule come from the Guides spine. It's built from Guides, a little SVG and your theme's tokens. The Pineham Guild, Wynstay and the juries are made up for the example.

FAQ

How do I change the awards?

Edit AWARDS at the top of the file: each has a name, what it was awardedFor, the jurors, the fixed year and a discipline that picks the specimen (type, grid, motion, colour or icons). The header's tally adds the jurors up. For a sixth award, add a specimen to specimenOf and change the grid's columns.

How are the specimens drawn?

Each is a few boxes or one small SVG in a framed stage, in your theme's foreground and faint mixes of it, so they follow light and dark. They are hidden from assistive technology: the award and what it was for are in the text under them. Swap a specimen for an img of the real thing if you have one.

Are these real awards?

No. The Pineham Guild and Wynstay are made up for the example, and so are the juries. Use your own programmes, and an award body's official mark only where its rules allow it.

How does it work on a phone and a tablet?

Below lg the cards are one row that scrolls sideways with snapping, the next card peeking in. The row is a focusable region named Design awards, so a keyboard can scroll it with the arrow keys. From lg all five share a row with room around their corners.

How does a screen reader read a card?

The awards are a list. Each item is the award as a heading, then the programme and year, then a description list with the thing it was awarded for and the jury. The year sits in a bdi so it keeps its order in a right-to-left layout.

All 137 awards blocks