Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Minimal Typography Awards Block for React

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.

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

The quietest awards block, for React with Base UI: no drawings, no icons, no buttons. A start-aligned header with a bold lead counted from the list ("Recognised every year since 2022."), then a single list of five lines between solid hairlines: the year in tabular figures at the start, the award at heading weight, and its programme, muted, at the end (under the award on a phone). The block ends on its last row. It is built from Guides 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 does the lead sentence come from?

It is built from the list: the earliest year in AWARDS gives "since 2022". Change a year and the sentence follows. Edit the text after it freely.

Can I add more lines?

Yes, but past about eight the block stops being quiet; use the table or the filter blocks for a long list. Each line is an li with a p for the year, an h3 for the award and a p for the programme.

Why no icons or marks?

That is the block's purpose: typography only, to sit next to louder sections. If you want marks, the sidebar and showcase blocks have a small drawn one per row.

Are these real awards?

No. Plainsong and the Jadebrook programmes are invented for the example.

What happens in a right-to-left page?

The year column and the programme column swap sides with the document, and each year sits in a bdi element so it keeps its order.

How does it fit on a phone?

The year and award share the first line and the programme drops under the award, still muted. Nothing scrolls sideways at 320 pixels.

  • Pro

    Compact Badge Strip Awards

    Strips and banners

    A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.

  • 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

    Sortable Table Awards

    Lists and tables

    A sortable table of awards with buttons in the column heads, aria-sort, status badges with an icon and a word, a sticky first column and a count in the foot.

  • Pro

    Year Rail Timeline Awards

    Timelines

    A vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.

  • Pro

    Raised Card Showcase Awards

    Cards and grids

    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.

  • Pro

    Accordion Awards

    Lists and tables

    Six awards as full-width bands that open one by one, each revealing a drawn mark, the facts behind the award and the jury's citation.

All 137 awards blocks