Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Stamped Editorial Picks Awards Block for React Aria

A centred header over three editor's picks for a reading app, each with a round stamp drawn in SVG, the publication, the pick's headline and a two-line pull quote in cells with overshoot lines.

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

An editor's-picks block for React with React Aria. A centred header sits over three cells with overshoot lines and + marks, each apart from the next. Every cell opens with a round stamp drawn in SVG: two rings, "Editor's pick" on the arc over the top, the publication on the arc under the bottom and "Pick" in the middle, turned a few degrees as a hand-stamped mark would be. Under it come the publication and its date, the pick's headline and a two-line pull quote. There are no stars. The page's rails and top rule come from the Guides spine. It's built from Guides, an inline SVG and your theme's tokens, with a CSS transition for the entrance. The publications and quotes are made up for the example.

FAQ

How do I change the picks?

Edit PICKS at the top of the file. Each pick has a publication, a headline, a quote, an ISO date, a lettering string for the publication's wordmark, the short ring text that runs on the stamp's lower arc and a turn class that tilts the stamp. Keep each id different: it names the two arcs the text follows.

How is the stamp drawn?

It's one SVG in a 120 by 120 box: two circles and two text paths, one arc over the top and one under the bottom. The words are real text on those paths, set at nine units with letter spacing, and "Pick" sits in the middle as ordinary text over the drawing. Long publication names need a shorter ring so they fit the lower arc.

Are these real publications?

No. The Jadeley Dispatch, The Tarnmoor Ledger and The Strathwick Review are made up, with their picks and quotes. Use a real publication's stamp only if it allows it, and quote it word for word.

How do screen readers read a pick?

The picks are a list named Editor's picks. A pick reads the publication ("The Jadeley Dispatch, editor's pick"), the date, the headline as a third-level heading and the pull quote as a block quotation. The stamp is a drawing hidden from assistive technology, so nothing depends on it.

Does anything move?

The block fades up once on load with a CSS transition, which is off under reduced motion. The stamps are still.

How does it fit on a phone?

The cells stack in one column with the stamp above the text, a size smaller. From md the stamp sits at the start of its cell with the text beside it, and from lg the three cells share a row with the stamp on top. Nothing scrolls sideways at 320 pixels.

All 137 awards blocks