Blockquote
Quote block with left border and optional citation.
Default
Design is not just what it looks like and feels like. Design is how it works.
Base
| Class | Description |
|---|---|
.ui-blockquote | Base class |
Variant
| Class | Value |
|---|---|
.ui-blockquote--accent | accent |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-blockquote-border-color |
var(--ui-color-border-strong) |
Border color |
--ui-blockquote-border-width |
var(--ui-border-width-lg) |
Border thickness |
--ui-blockquote-padding-inline |
var(--ui-space-3) |
Horizontal padding |
--ui-blockquote-color |
var(--ui-color-text-muted) |
Text color |
--ui-blockquote-font-size |
var(--ui-font-size-lg) |
Font size |
--ui-blockquote-line-height |
var(--ui-line-height-lg) |
Line height |
With Citation
The best way to predict the future is to invent it.
Alan Kay
<blockquote class="ui-blockquote">
<p>The best way to predict the future is to invent it.</p>
<cite class="ui-blockquote__cite">Alan Kay</cite>
</blockquote>Accent Variant
Simplicity is the ultimate sophistication.
Leonardo da Vinci
<blockquote class="ui-blockquote ui-blockquote--accent">
<p>Simplicity is the ultimate sophistication.</p>
<cite class="ui-blockquote__cite">Leonardo da Vinci</cite>
</blockquote>