Blockquote
Renders a styled blockquote with a left accent border, italic muted text, and an optional citation. The accent color follows the chosen variant, and the citation can be supplied either through the cite attribute or, for richer markup, the author slot.
Preview
<script type="module" src="/pura/lib/blockquote.js"></script>
<!-- Default accent with a plain citation -->
<pura-blockquote cite="Marie Curie">
Nothing in life is to be feared, it is only to be understood.
</pura-blockquote>
<!-- Colored accent variant -->
<pura-blockquote variant="warning" cite="Carl Sagan">
Somewhere, something incredible is waiting to be known.
</pura-blockquote>
<!-- Rich citation via the author slot -->
<pura-blockquote variant="info">
We are all in the gutter, but some of us are looking at the stars.
<span slot="author">Oscar Wilde, <em>Lady Windermere's Fan</em></span>
</pura-blockquote>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | string | default | Accent color for the border and citation. One of: default, accent, primary, success, warning, danger, info. |
cite | string | — | Citation text rendered as a <cite> line. Hidden when content is supplied via the author slot. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/blockquote.js"></script>import "./pura/lib/blockquote.js";