shadcn.io is not affiliated with official shadcn/ui
Chair's Quote Seal Awards Block for React
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 Base UI. 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.
Related
- “Pro
Jury Statement Awards
Press and quotesThe 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
Judges Quotes Testimonials Awards
Press and quotesThree 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.
- Pro
Stamped Editorial Picks Awards
Press and quotesA 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
Masthead Featured Article Awards
Press and quotesA 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.
- Pro
Annotated Seal Awards
Badges and sealsA large drawn seal with a grade, a year ribbon, a serial and the lab and programme set round it on a text path, with four numbered hairline leaders to an ordered list that explains each mark.
- Pro
Certificate Awards
One featured awardA 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.