refrakt.mdPullQuote
Editorial pull quotes for magazine-style layouts. Extracts blockquotes or paragraphs and displays them as prominent typographic elements.
Basic usage
Wrap a blockquote or paragraph to turn it into a pull quote.
{% pullquote %}
> Design is not just what it looks like and feels like. Design is how it works.
{% /pullquote %}<blockquote data-rune="pull-quote">
<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
<meta content="center" data-field="align">
<meta content="default" data-field="variant">
</blockquote>Design is not just what it looks like and feels like. Design is how it works.
<blockquote class="rf-pullquote rf-pullquote--center rf-pullquote--default" data-align="center" data-variant="default" data-rune="pull-quote" data-density="compact">
<blockquote>
<p>Design is not just what it looks like and feels like. Design is how it works.</p>
</blockquote>
</blockquote>Alignment
Use the align attribute to position the pull quote within the content flow.
{% pullquote align="right" %}
> The best interface is no interface.
{% /pullquote %}<blockquote data-rune="pull-quote">
<blockquote>
<p>The best interface is no interface.</p>
</blockquote>
<meta content="right" data-field="align">
<meta content="default" data-field="variant">
</blockquote>The best interface is no interface.
<blockquote class="rf-pullquote rf-pullquote--right rf-pullquote--default" data-align="right" data-variant="default" data-rune="pull-quote" data-density="compact">
<blockquote>
<p>The best interface is no interface.</p>
</blockquote>
</blockquote>Styles
The variant attribute controls the visual treatment.
{% pullquote variant="accent" align="center" %}
> Words can be like X-rays if you use them properly — they'll go through anything.
{% /pullquote %}<blockquote data-rune="pull-quote">
<blockquote>
<p>Words can be like X-rays if you use them properly — they'll go through anything.</p>
</blockquote>
<meta content="center" data-field="align">
<meta content="accent" data-field="variant">
</blockquote>Words can be like X-rays if you use them properly — they'll go through anything.
<blockquote class="rf-pullquote rf-pullquote--center rf-pullquote--accent" data-align="center" data-variant="accent" data-rune="pull-quote" data-density="compact">
<blockquote>
<p>Words can be like X-rays if you use them properly — they'll go through anything.</p>
</blockquote>
</blockquote>{% pullquote variant="editorial" %}
> Simplicity is the ultimate sophistication.
{% /pullquote %}<blockquote data-rune="pull-quote">
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
</blockquote>
<meta content="center" data-field="align">
<meta content="editorial" data-field="variant">
</blockquote>Simplicity is the ultimate sophistication.
<blockquote class="rf-pullquote rf-pullquote--center rf-pullquote--editorial" data-align="center" data-variant="editorial" data-rune="pull-quote" data-density="compact">
<blockquote>
<p>Simplicity is the ultimate sophistication.</p>
</blockquote>
</blockquote>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
align | string | center | Horizontal alignment: left, center, or right |
variant | string | default | Visual variant: default, accent, or editorial |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |