Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Judges Quotes Testimonials Awards Block for React Aria

Three judges' quotations for a meeting app, each tied to the award it is about: the award's drawn mark, the award and programme, the quotation, and the judge's name and role, 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

A judges' testimonials block for React with React Aria. A start-aligned header sits over three cells with overshoot lines and + marks, each tied to one award. A cell opens with the award's mark (a cup, a medal or a rosette, drawn in SVG), then the award as the heading with its programme and year under it, then the judge's quotation and, at the foot, the judge's name and role. The author is the jury and the subject is the award, which sets it apart from a customer testimonial. On a phone the cells are a snap row, each 85% wide so the next one peeks in. The page's rails and top rule come from the Guides spine. It's built from Guides, inline SVG and your theme's tokens. The programmes, the judges and the quotations are made up for the example.

FAQ

How do I change the quotations?

Edit JUDGEMENTS at the top of the file. Each has the award, its programme and year (a fixed number), the judge's name and role, the quote and a shape for the mark (cup, medal or rosette). Add a fourth and change the grid's three columns to four, or let it wrap.

Can I draw another mark?

The marks are data: each shape is a few stroked paths in a 24 by 24 box in SHAPES, drawn by one small component in the cell's text colour. Add a shape to the table and to the Shape type. The award stays in text beside the mark, never in the drawing.

Are these real judges?

No. The Rowanhaven Awards, the Dunhollow Software Prize, the Kellmoor Cup and the judges are made up. Quote real judges only with permission, word for word.

How do screen readers read a cell?

Each cell reads the award as a third-level heading, then the programme and year, then the quotation as a block quotation and the judge. The mark is hidden from assistive technology.

How do I scroll the row on a phone or with a keyboard?

Swipe the row; each cell snaps into place. The row is a labelled region that takes keyboard focus, so the arrow keys scroll it. From md the cells share one grid and the region has nothing to scroll.

How does it fit on a phone?

The cells sit in one row you swipe, each in a hairline card with the next one showing at the end. The overshoot lines and marks are for md and up, where the cells are three columns apart. Nothing scrolls the page sideways at 320 pixels.

All 137 awards blocks