# Quote

`Quote` presents escaped quotation text as paragraphs with an optional attribution.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { Quote } from "@dg/ui";
</script>

<Quote content={"First paragraph.\n\nSecond paragraph."} author="Example author" />
```

## Notes

- 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.
- `Quote` can 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.

## Parameters

| 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.                                                       |

## Overrides

| 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. |

## Accessibility

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.