shadcn.io is not affiliated with official shadcn/ui
Chair's Quote Seal Awards Block for React Aria
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.
Installation
Overview
A chair's quotation for React with React Aria. A heading ("Why we were chosen") sits over one quotation set large as a block quotation, with the attribution under a hairline: the chair's name, their role and the programme and year. Beside it from lg, in a hairline frame with + marks on its corners, the programme's seal: a scalloped rosette of sixteen lobes round a double ring, drawn in SVG, with the prize's name, "Chair's citation" and the year set as text over it. There are no buttons. The copy comes first in the DOM and on a phone, with the seal under it; from lg the seal moves to the start. 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. The prize, the chair and the words are made up for the example.
FAQ
How do I change the quotation?
Edit CITATION at the top of the file: the quote, the chair's name (chair) and role, the programme and the year. The year sits in a bdi element, so it keeps its order in a right-to-left layout. Keep the quotation to a few sentences: it is set at 24 to 30 pixels.
How is the seal drawn?
The rosette is one path. Sixteen vertices sit on a circle and each lobe is a half-circle arc between two neighbours, with a radius that comes from the sine of half the angle between them. The numbers are rounded to one decimal at module level so the server and the browser agree. Change LOBES for a seal with more or fewer points.
Is the chair a real person?
No. Odalys Merrinwood, the Thornbrook Prize and the quoted words are made up. Quote a real chair only with their agreement, and in their words.
How do screen readers read it?
The heading, then the quotation as a block quotation in a figure, whose caption gives the chair, their role, the programme and the year. The seal is a drawing hidden from assistive technology: the programme is in the caption.