shadcn.io is not affiliated with official shadcn/ui
Large Quote About Block for React Aria
The first memo of a notes app: the sentence that explains why the company exists set large with a phrase marked, beside a drawing of the memo it came from in a hairline frame, with a divider between them.
Installation
Overview
A founders' quote for React with React Aria, written for Foolscap, a fictional notes app. The sentence that explains why the company exists is set large and is the section's heading, with the phrase that carries it marked by a pale highlighter that draws across it once on load; under it a caption says where it comes from, "The first memo", in the Year 1 handbook. Beside it, on wide screens at the start of the row, a greyscale drawing of that memo sits in a hairline frame with + marks on its corners: a clip, To, From and Subject lines, a few lines of text with the quoted one marked, and a signature. A divider and the top rule meet at a + mark. The quote comes first in the document, so reading order and phones start with the words; the memo follows on a phone, without its frame. The page's rails and top rule come from the Guides spine. It's built from Guides and Highlight Text, with a CSS entrance and your theme's tokens for every colour. For about pages, handbooks and any section that quotes the founders without turning into a testimonial.
FAQ
How do I change the quote and the memo?
The quote and its caption are plain text in the component; the marked phrase is the text prop of the HighlightText. The memo's header rows are MEMO_FIELDS at the top of the file, and the widths of its body lines are MEMO_LINES and MEMO_TAIL. The memo is a drawing, so keep its words in step with the quote and the caption.
Why is the quote a heading?
The quote is the one sentence the section is about, so it's the h2, inside a blockquote with a figcaption as the last child of the figure. The outline then lists the quote itself. Drop the h2 to a p if your page already has a heading for the section.
Is the memo read by a screen reader?
No. It's a drawing, hidden from assistive technology, and everything it says is in the caption: the first memo, from the Year 1 handbook, sent by the founders to everyone. Its lines of text are skeleton bars, not copy.
Why does the memo come second in the document but first on screen?
So the words lead for people using a screen reader and on phones, while a wide layout puts the picture at the start. The memo is placed in the first column with grid positions, not order, so tab order and reading order never disagree with the page.