Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Press to Flip Award Cards Block for React

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 React with Base 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.

  • Pro

    Medallion Flip Awards

    Badges and seals

    Five drawn coin medallions that a Front and Back toggle turns over together, a front emblem and a back year, with each side's text kept in the page.

  • Pro

    Fanned Plaque Stack Awards

    Reveal and browse

    A fanned pile of five award plaques that a Stack and Spread toggle lays out in a row, or on a phone a vertical list, with a CSS transform transition.

  • Pro

    Dense Badge Wall Awards

    Badges and seals

    A wall of twelve drawn award badges on shared hairlines, four across, with a tally counted from the list and a show-all button on phones.

  • Pro

    Flip Cards Team

    Grids and walls

    Four people of a florist network as cards that turn over in 3D on a button press: the front is initials, a name and a role, the back a quote and two things to ask them about; reduced motion cross-fades.

  • Pro

    Category Grid Awards

    Cards and grids

    Sixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.

  • Pro

    Laurel Display Awards

    Badges and seals

    A band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.

All 137 awards blocks