Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Press to Flip Award Cards Block for Vue

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.

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 flip-card grid for Vue 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.

Are these real awards?

No. Every programme and product here is made up for the example, and the trophies, rosettes and medals are drawn by the block, not copied from any award body. Replace them with your own recognition, and use an organiser's official artwork only if its rules allow it.

Are the years computed?

No. Each year is fixed in the data, so an award given in 2025 stays 2025. Years are wrapped in a bdi element so they keep their order on a right-to-left page.

All 137 awards blocks