Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Raised Card Showcase Awards Block for Ark UI

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

All 137 awards blocks