Stamped Editorial Picks Awards Block for React

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.

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.

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.

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.

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

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.