Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Seal Row Awards Block for Radix UI

A free row of six drawn award seals, each a different silhouette, with the award, its programme and the year under it, and one counted line below.

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 row of award seals for React with Radix UI. Under a centred header and the page's top rule, six seals stand free in a row with no frame and no cells: a crown, a star, a medal on its ribbon, a gem, a shield and a rosette, each drawn in SVG in the foreground tone (no metal colours) and hidden from assistive technology. Under each seal the award is a heading, then the programme that gave it and the year in tabular figures; one quiet line below counts the programmes from the list ("Recognised by 6 programmes in 2025"). Three seals across on a phone, six from lg. It is built from Guides and your theme's tokens, with a CSS entrance. For a landing page that wants its recognition on one line of sight, without a wall. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.

FAQ

How do I change the awards?

Edit AWARDS at the top of the file: each has a title, a programme, a year and a shape (crown, star, medal, gem, shield or rosette). The line under the row is counted from the list: the number of different programmes that gave an award in the latest year. Keep it at six for the 3 by 2 and 6 across layouts.

Why are the seals drawn instead of icons?

Each seal is a few SVG paths in a 64 by 64 box that take the text colour, with a faint opaque fill and a 1.25 px stroke at any size. A shape tells the kind of recognition; a metal colour never does. They are aria-hidden, so the award is read from the text under each one.

Are these real awards?

No. The programmes are invented for the example and none is a real award, publication or badge. Replace them with your own, and link to the programme's page or story if you have one.

Are the years computed?

No. A year is fixed in the data, so an award given in 2025 stays 2025. It is wrapped in a bdi element so a right-to-left page keeps the digits in order.

How does it fit on a phone?

Three seals across and two rows, the seals 56 px, the programme names wrapping onto a second line when they need to. The first award starts well inside the first screen and nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the row fade up once when the page loads, with a CSS transition. With reduced motion the transition is off and the block simply appears. Nothing else moves.

All 137 awards blocks