Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Raised Card Showcase Awards Block for React

Three awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.

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 showcase of awards for React with Base UI. A centred header with a bold lead sits above a card in card that follows your theme: a tinted shell with + marks on its corners and a raised panel inside it holding three rows between hairlines. Each row is a small drawn mark (strokes only), the award as the heading, its programme, a one-line reason why it won and the year at the end. A Shine Button under the card goes on to all the awards. It is built from Shine Button, Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The programmes and the reasons are made up for the example: replace them with your own.

FAQ

How do I add or remove a row?

Edit AWARDS at the top of the file: each has a title, programme, a shape (star, shield or gem), a one-line why and a year. Three rows fit the card well; past five, consider the details or grid blocks instead.

Can I draw my own marks?

Add a shape to SHAPES: a list of path strings in a 24 by 24 box, stroked in your foreground colour. The marks are decoration and hidden from assistive technology, so the award is always in the text beside them.

Where does the button go?

It links to #: point it at your full awards page. It is a Shine Button on every base, so it can be your router's link.

Does it follow the theme?

Yes. The shell is bg-muted/50 with a hairline border and the panel is bg-card, so both change with light and dark mode. Nothing in the block sets its own dark scope.

Are these real awards?

No. Vitrine and the Gullford programmes are invented for the example.

How does it fit on a phone?

The card is inset from the page rails so its + marks have room, the rows keep their three columns (mark, text, year) and the reason wraps. Nothing scrolls sideways at 320 pixels.

  • Pro

    Featured Plaque Awards

    One featured award

    One grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.

  • Pro

    Details Awards

    Cards and grids

    Three award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.

  • Pro

    Minimal Typography Awards

    Lists and tables

    Awards as pure typography for a writing app: five lines between hairlines, each the year in tabular figures, the award at heading weight and its programme muted, with no drawings, icons or buttons.

  • Pro

    Bento Awards

    Cards and grids

    The evidence behind one award in five cells set apart: the grand prize with a drawn seal, a counting figure, a jury quote, a score with a bar and a small laurel.

  • Pro

    Centered Email Capture CTA

    Forms and capture

    A call to action between solid rails that follows the page theme, in a card in card with a two-step email capture: an email field and a Shine Button, then a six-digit code that verifies on the sixth digit and turns into a confirmation in the same space.

  • Pro

    Trophy Hero Awards

    One featured award

    An award as a hero for a voice platform: the headline, one sentence, a Shine Button and three judging figures beside a drawn trophy on a plinth with four category chips in front.

All 137 awards blocks