University of St Andrews

Long-form quotes

The long-form quotes pattern is used for including quotes within a long-form story. The inclusion of quotes is optional.

Rules for long-form quotes

• Must only be used within the main content of a long-form page.

Options available

• Blockquotes
• Pull quotes

Blockquotes

Blockquotes are used to quote something within the flow of the article.

• This is the long-form specific style for blockquotes and must only be used on long-form pages.
• Should be used for longer quotes.

<!-- Begin pattern: long-form quotes//-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <blockquote><p>Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form quotes //-->

Pull quotes

Pull quotes are used to quote something from the flow of the article in a larger size to draw the reader into the article.

• Should be used for short quotes.

<!-- Begin pattern: long-form quotes//-->
<section class="long-form">
    <div class="container">
        <div class="row">
            <div class="long-form__wrapper">
                <div class="long-form__content">
                    <p class="pull-quote">Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: long-form quotes //-->