Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Minimal Typography Awards Block for Solid

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

The quietest awards block, for Solid with Ark 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.