Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Four Columns Awards Block for React

Four tall award columns for a sports-analytics tool, each with a drawn mark, the award, programme, category and year, over a band of three figures counted from the list: awards, programmes and years running.

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 horizontal run of awards for React with Base UI. After a start-aligned header, four tall columns stand side by side between hairlines: a drawn mark at the top, the award as the heading, its programme and category, and the year at the foot. Under them a full-width band holds three figures counted from the same list (awards, programmes and years running), and the band ends the block. Both bands draw their rules with + marks. It is built from Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The awards and programmes are made up for the example: replace them with your own.

FAQ

Where do the three figures come from?

They are computed from AWARDS: the number of awards, the number of distinct programmes, and the span from the first year to the last (years running). Add or change a row and the band updates.

Can I use three or five columns?

Three or four fit the grid as written (md:grid-cols-4); for another count change that class and the column count. On a phone every count becomes the same scrolling row.

How does the row work on a phone?

The columns become a row you scroll sideways and snap, each 85 percent of the width so the next one shows at the edge. The row is a labelled, focusable region, so a keyboard can scroll it with the arrow keys. The band of figures stays three across.

Are the marks images?

No. They are paths in a 64 by 64 box drawn in your foreground colour (a cup, a shield, an obelisk and a medal) and hidden from assistive technology; the award is in the text.

Are these real awards?

No. Crossbar and the Quillcombe programmes are invented for the example.

What happens in a right-to-left page?

The columns run in the document's direction, dividers use logical borders, and years and figures sit in bdi elements so they keep their order.

  • Pro

    Recognition Sidebar Awards

    Press and quotes

    A page excerpt with a recognition sidebar: an article about a knowledge-base tool taking two thirds and an aside beside it listing five awards with a drawn mark, the programme and the year.

  • 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

    Placement Rosettes Awards

    Badges and seals

    Four placement columns for a dog-show manager, each opening with a drawn rosette for first, second, third or highly commended, with a derived count and the results beneath.

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

  • Pro

    Big Numbers Awards

    Charts and figures

    Four display-size figures for an inventory-counting app on shared hairlines (awards won, programmes, categories led and years running), counted up once on view and all derived from one typed list of awards.

  • Pro

    Grid Awards

    Cards and grids

    Four awards for a mortgage app in a 2 by 2 grid on shared hairlines, each tile with its own drawn trophy, the award, the programme and the year.

All 137 awards blocks