Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Featured Plaque Awards Block for React

One grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.

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 featured award for React with Base UI: one prize, told in full. Between solid rails the block is a split with a divider that carries a + mark where it meets the top rule. At the end are the heading ("Gresham is the Briarworth Awards' Platform of the year"), a bold-lead sentence, a description list (programme, category, entries judged, who judged it, the day it was announced) and one sentence from the jury. At the start stands the award as a large plaque: a double hairline frame with + marks on its corners, a solid laurel wreath around the award's title with the year on a ribbon tied across the stems, and the programme under it. It is built from Data List, Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The award, the programme, the figures and the jury's sentence are made up for the example: replace them with your own.

FAQ

How do I change the award?

Edit AWARD at the top of the file: the title (the wreath's lettering), programme, category, entries, judges, date (an ISO day such as 2025-03-18), year, the jury's sentence (jury) and who said it (jurors). The heading and the lead sentence read from the same object.

Is the plaque an image?

No. It is SVG drawn in code: two mirrored branches of leaves, a ribbon and a framed card, all in your foreground colour. The wreath and the ribbon have no text of their own: the title and the year are real text laid over the drawing, so they follow your font, your theme and the reader's zoom.

What do screen readers get?

The plaque is hidden from assistive technology because everything on it is also in the text: the heading names the award, and the description list gives the programme, category, entries, panel and date as labelled terms and values. The jury's sentence is a blockquote with its source in a footer.

Why does the plaque come second on a phone?

The copy is first in the document, so a reader and a keyboard meet the heading before the picture, and the plaque takes the start column from lg with a grid placement, not a reordering. On a phone the plaque follows the facts, under a rule that stands in for the divider.

Are the award and the jury real?

No. Briarworth Awards and Gresham are invented, and the entry count and the jury's sentence are example figures. Feature only recognition you have actually received, and use a programme's official badge only where its rules allow it.

What happens in a right-to-left page?

The columns swap sides with the document, the divider and the + marks follow, the wreath is symmetric, and the year, the count and the date sit in bdi elements so they keep their order.

  • Pro

    Ceremony Scene Split Awards

    One featured award

    An award told as a scene for a video-call app: a drawn ceremony stage with a lectern and an audience in a frame beside the award's name, a sentence and a description list ending with who accepted it.

  • Pro

    Trophy Hero Awards

    One featured award

    An award as a hero for a voice platform: the headline, one sentence, a Shine Button and three judging figures beside a drawn trophy on a plinth with four category chips in front.

  • Pro

    Details Awards

    Cards and grids

    Three award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.

  • Pro

    Laurel Display Awards

    Badges and seals

    A band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.

  • 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

    Certificate Awards

    One featured award

    A formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.

All 137 awards blocks