Pull Quote

Examples for the ss-c-pull-quote module.

Default

Design systems are products that serve products.

— Nathan Curtis
HTML 
<blockquote class="ss-c-pull-quote">
            <p class="ss-c-pull-quote__text">Design systems are products that serve products.</p>
            <footer class="ss-c-pull-quote__attribution">&mdash; Nathan Curtis</footer>
        </blockquote>

Elevated

Constraints liberate, freedom imprisons.

— Anonymous
HTML 
<blockquote class="ss-c-pull-quote ss-c-pull-quote--elevated">
            <p class="ss-c-pull-quote__text">Constraints liberate, freedom imprisons.</p>
            <footer class="ss-c-pull-quote__attribution">&mdash; Anonymous</footer>
        </blockquote>

More Designs

Design is thinking made visual.
— Saul Bass
Whitespace is to be regarded as an active element, not a passive background.
— Jan Tschichold
Typography is the craft of endowing human language with a durable visual form.
— Robert Bringhurst
Less, but better.
— Dieter Rams
HTML 
<figure class="ss-c-pull-quote ss-c-pull-quote--accent">
        <blockquote class="ss-c-pull-quote__text">
            Design is thinking made visual.
        </blockquote>
        <figcaption class="ss-c-pull-quote__attribution">
            — Saul Bass
        </figcaption>
    </figure>
    <figure class="ss-c-pull-quote ss-c-pull-quote--inverted">
        <blockquote class="ss-c-pull-quote__text">
            Whitespace is to be regarded as an active element, not a passive
            background.
        </blockquote>
        <figcaption class="ss-c-pull-quote__attribution">
            — Jan Tschichold
        </figcaption>
    </figure>
    <figure class="ss-c-pull-quote ss-c-pull-quote--marked">
        <blockquote class="ss-c-pull-quote__text">
            Typography is the craft of endowing human language with a durable
            visual form.
        </blockquote>
        <figcaption class="ss-c-pull-quote__attribution">
            — Robert Bringhurst
        </figcaption>
    </figure>
    <figure class="ss-c-pull-quote ss-c-pull-quote--centered">
        <blockquote class="ss-c-pull-quote__text">
            Less, but better.
        </blockquote>
        <figcaption class="ss-c-pull-quote__attribution">
            — Dieter Rams
        </figcaption>
    </figure>