shadcn.io is not affiliated with official shadcn/ui
Large Quote About Block for React
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 Base UI, 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.
Related
- Pro
Large Quote Testimonial
One big quoteAn oversized quote whose type scales with its own container, in a band with the attribution running vertically in a rail at the end edge.
- Pro
Split Layout Founder Letter Hero
TestimonialsA start-aligned hero with a headline, a Shine Button and three ruled promises, over a full-width band holding the founder's letter as three cells of one quotation and a signature row.
- Pro
Founder Letter with Margin Notes About
Company storyA founder letter for a document-signing company, set on a sheet with margin notes that line up beside each paragraph and fold under it on a narrow screen.
- Pro
Mission About
StatementsA mission statement for a home-care scheduling company: the mission in large type beside one supporting sentence, three pillars that each carry the figure they are checked by, and a founding line in relative time.
- Pro
Bold Statement About
StatementsA bold statement for a furniture marketplace: one sentence in display type with a phrase picked out by a drawing marker on a faded field of dots, and three one-word commitments in a band ruled from rail to rail.
- “Pro
Split Quote Panel Hero
TestimonialsA reverse split hero that opens with a customer quote: a tinted panel on the start side in three ruled bands (quote, author, two results), and the headline and a Shine Button at the end.