Example Component Library
Demo Components
Card
Layouts Hero
Info card Slotted card
Alert Badge Button Quote oneup Rich button User card
Demo Extra Button
Demo Nav
Cards Info card
Elements Quote oneup Badge
Icon Accessibility
Generic Divider Tooltip
Action button Design guidelines
Demo Single Chip Pill
Gallery / Demo Nav / Elements / Quote oneup Gallery / / Quote oneup
Demo Nav / Elements /

Quote One-Up

The quote_oneup component is a complex block component that showcases slots and rich HTML content.

Basic Usage

{% quote_oneup "To be or not to be" %}
{% slot "author" %}Shakespeare{% endslot %}
{% endquote_oneup %}
<figure class="quote-oneup">
    <blockquote>
        To be or not to be
    </blockquote>
    <figcaption>
        — Shakespeare
        
    </figcaption>
</figure>

Complex Usage

{% quote_oneup "To be or not to be, that is the question." %}
{% slot "author" %}<strong>William Shakespeare</strong>{% endslot %}
{% slot "source" %}<cite>Hamlet</cite>{% endslot %}
{% endquote_oneup %}
<figure class="quote-oneup">
    <blockquote>
        To be or not to be, that is the question.
    </blockquote>
    <figcaption>
        — <strong>William Shakespeare</strong>
        
            <cite><cite>Hamlet</cite></cite>
        
    </figcaption>
</figure>