Blockquote
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A quotation set off by a bar down its left side, with an optional citation below it.
The citation always stays on one line. One too long for the quote's width ends in "…", so the quote's height stays the same however long its source is.
Import
import { Blockquote } from "~lib/typography";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | Yes | N/A | Quote content |
cite | string | No | N/A | Attribution / source name, on one line |
size | "xs" to "8xl" | No | "base" | Text size of the quote and its source |
italic | boolean | No | true | Set the quote in italic |
truncate | boolean | No | false | Truncate overflow |
fit | "content" | "fill" | number | No | "content" | Container height behavior |
Examples
Simple
With Citation
Long Quote
Sizes
Set size to match the text around the quote, on the same steps as Paragraph. The citation and
the bar's spacing shrink or grow with it, so a small quote fits a slim column or a thin band.
<Blockquote size="xs" cite="Example sentence">
She had a quixotic plan to sail around the world alone.
</Blockquote>
Above lg the sizes carry on up the heading steps (xl to 4xl) and past the largest heading
(5xl to 8xl), for a quotation alone in a large box. The bar thickens with the type, and the
citation stays a byline a few steps smaller rather than growing with the quote. The largest steps
are those the Display figures use, but a quote set at one wraps on a level 1 heading's leading.
<Blockquote size="6xl" cite="Leonardo da Vinci">
Simplicity is the ultimate sophistication.
</Blockquote>
Upright
A quote is set in italic, as quotations are printed. Set italic={false} to set it upright.
Long Citation
A source such as a page title can be longer than the quote is wide. It stays on one line and ends in "…" instead of wrapping under the quote.
Fit Modes
Fit Content (default)
Container sizes to its text content. Use when the text should take only as much space as it needs.
Fit Fill
Container fills available flex space. Use inside flex layouts when the text should expand to fill remaining space. Text that runs past that space is cut at the container's edge instead of drawn over the block below, which keeps a widget's saved render tidy when it is laid out in a smaller box than the one it was measured in.
Fixed Height
Container has a hard-coded pixel height. Use when you need a precise, known container size.