Blockquote
FreeA styled quotation component using the native <blockquote> element with an accent border and optional citation. Supports pull quotes for editorial emphasis and standard quotes for attributions. Use for testimonials, highlighted excerpts, and cited references.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard blockquote with a left accent border and quoted text. | Use for inline quotations and cited text within body content. |
| With Attribution |
Usage Guidelines
Do
Use the native <blockquote> element for proper semantics.
Don't
Use blockquotes for visual indentation — use proper layout utilities.
Do
Include a <cite> element when the source is known.
Don't
Nest blockquotes within blockquotes.
Do
Use pull quotes sparingly — one per article section at most.
Don't
Use pull quotes for every quote — reserve them for editorial emphasis.
Do
Keep quoted text concise — if it exceeds 3–4 lines, consider summarising.
Don't
Code
HTML
<figure class="lex-blockquote">
<blockquote cite="https://example.com/source">
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
<figcaption class="lex-blockquote__citation">
— <cite>Steve Jobs</cite>
</figcaption>
</figure>CSS Custom Properties
.lex-blockquote blockquote {
margin: 0;
padding: var(--lex-space-16) var(--lex-space-20);
border-left: 3px solid var(--lex-blockquote-border, var(--lex-color-brand));
background: var(--lex-blockquote-bg, var(--lex-bg-surface-subtle));
border-radius: 0 var(--lex-radius-md) var(--lex-radius-md) 0;
}
.lex-blockquote blockquote p {
font-size: var(--lex-font-size-md);
line-height: var(--lex-line-height-relaxed);
color: var(--lex-text-default);
font-style: italic;
margin: 0;
}
.lex-blockquote__citation {
margin-top: var(--lex-space-8);
font-size: var(--lex-font-size-sm);
color: var(--lex-text-muted);
}
.lex-blockquote__citation cite {
font-style: normal;
font-weight: 500;
}
.lex-blockquote--pull blockquote {
border-left: none;
text-align: center;
padding: var(--lex-space-24) var(--lex-space-32);
background: transparent;
}
.lex-blockquote--pull blockquote p {
font-size: var(--lex-font-size-xl);
font-weight: 500;
}React
// Using Lexicon CSS classes with React
export function QuoteSection() {
return (
<Blockquote
cite="https://example.com/source"
citation="Steve Jobs"
>
Design is not just what it looks like and feels like.
Design is how it works.
</Blockquote>
);
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-blockquote-border | — | — | border |
| --lex-blockquote-bg | — | — | bg |
| --lex-blockquote-text | — | — | text |
| --lex-blockquote-padding | — | — | padding |
Accessibility
- Use the native <blockquote> element — it conveys quotation semantics to assistive technology.
- Include the cite attribute on <blockquote> with the source URL when available.
- Use <figure> and <figcaption> to associate the citation with the quote.
- Pull quotes should not duplicate content that is already in the surrounding text.