Quote
Quote presents escaped quotation text as paragraphs with an optional attribution.
01Preview
A quotation has its own voice.
Give the words room to breathe.
02Usage
Load @dg/ui/styles.css once in the root layout.
<script>
import { Quote } from "@dg/ui";
</script>
<Quote content={"First paragraph.\n\nSecond paragraph."} author="Example author" />
03Notes
- Native HTML attributes, DOM callbacks, class and style are forwarded to the figure.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
Quotecan sit inside.formatted, which spaces it like any other block.- Set public overrides on the quote or an ancestor. The author keeps its own metadata typography.
04Parameters
| Name | Type | Default | Description |
|---|---|---|---|
content | string | "" | Quotation text. Blank lines create paragraphs; text is escaped rather than interpreted as HTML. |
author | string | "" | Optional attribution below the quotation. |
05Overrides
| Name | Type | Default | Description |
|---|---|---|---|
--quote-font-family | font family | var(--font-serif) | Quotation font; set on an ancestor. |
--quote-font-size | CSS length | var(--body-font-size) | Quotation text size. |
--quote-font-weight | font weight | var(--heading-font-weight) | Quotation weight. |
--quote-font-style | font style | italic | Use normal to remove the default italic. |
--quote-paragraph-gap | CSS length | var(--space-3) | Space between paragraphs separated by blank lines. |
06Accessibility
The structure uses figure, blockquote and optional figcaption. The large quotation mark is decorative. Preserve the supplied quotation and attribution; content is plain text, not HTML.