shadcn.io is not affiliated with official shadcn/ui
Press to Flip Award Cards Block for Solid
Six award cards in a hairline grid that are each a button flipping on press or Enter, from a drawn mark and the award to the entries it was selected from and its judging criteria.
Installation
Overview
A flip-card grid for Solid with Ark UI. A compact header carries a tally counted from the list, then six cells that share their hairlines run rail to rail, three across (two on a phone), ending the block. Each cell is a real button with aria-pressed holding a card that turns in 3D: the front shows a drawn mark (a target, a star, a book, a bulb, a cap or a cup), the award, the programme and the year with a "Turn over" hint; the back is inverted and reads how many entries it was selected from, in how many countries, and the criteria it was judged on. The faces carry the opacity, never the turning parent. Under reduced motion the card doesn't turn but cross-fades, and still flips. 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 cards?
Edit AWARDS: each has an award, a programme, a year, a mark, the entries and countries it was selected from and three criteria. The header's tally sums the entries.
How does a card flip?
Press it, or focus it and press Enter or Space. Each card keeps its own state, so any number can be turned at once. The button reports aria-pressed and is named "Turn over the … card".
What do screen readers hear?
The words are in the page once, as hidden text beside each button: the award, the programme and year, then the back's sentence and criteria. The faces repeat them but are hidden from assistive technology, so nothing is read twice.
What happens under reduced motion?
The card doesn't turn: the back lies over the front and the two swap opacity in 200 ms, so a press still shows the other side.