Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Judges Quotes Testimonials Awards Block for React

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 Base UI. 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.

  • Pro

    Jury Statement Awards

    Press and quotes

    The jury's statement for each category a legal-drafting tool won: the categories as a radio group at the start, the chosen one's statement as a large quote with its jurors' avatars at the end.

  • Pro

    Chair's Quote Seal Awards

    One featured award

    One large quotation from a prize jury's chair for a citation manager, under a heading, with the chair's name and role, beside the programme's seal drawn as a scalloped rosette in a frame.

  • Pro

    Judge Hover Card Awards

    People and teams

    The jury of a hackathon cup as six cells on shared hairlines, each an initials avatar, a name, a role, a workplace and the fields judged, with a short bio in a hover card on hover, focus or touch.

  • Pro

    Stamped Editorial Picks Awards

    Press and quotes

    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.

  • Pro

    Pin a Quote Testimonials

    Expand, flip, pin

    Four quote rows in a ruled list with Pin toggles: the pinned quote moves up into a large featured card, a raised panel in a tinted shell with + marks, split from the list by a solid divider, under a compact header with a Shine Button.

  • Pro

    Masthead Featured Article Awards

    Press and quotes

    A feature article about a newsletter platform set as a clipping: headline, byline, an excerpt with a drop cap and a link, beside a drawn masthead and a description list of publication, section, date and reading time.

All 137 awards blocks