components

Pullquote

Used to highlight meaningful quotes from experts or program participants in order to support or illustrate a content on a page.

  • “We need to continue to find new and innovative ways to reach the poor, and make the world secure and stable through development finance.”
    Joe Stiglitz
    Jim Yong Kim
    President World Bank Group 
    <div class="lp__pullquote">
<div class="lp__pullquote_body">
    <h5>“We need to continue to find new and innovative ways to reach the poor, and make the world secure and stable through development finance.”</h5>
    <div class="media-object">
        <div class="pullquote-img">
        <img src="../assets/img/expert-2.jpg" title="" class="img-responsive" alt="Joe Stiglitz">
        </div>
        <div class="pullquote_content">
            <div class="author_title">Jim Yong Kim</div>
            <div class="author_subtitle">President World Bank Group</div>
        </div>
    </div>
</div> 
</div>
  • Use:

    To either emphasize a point to a reader, or to entice further reading by creating a point of interest.


    Don’t Use:

    To highlight quotes longer than a short paragraph or to highlight non-quote text in a publication.


    Visual Style:

    Pull quotes are made up of four components contained between two horizontal lines which separate the quote from the rest of the body text. This includes the quote, the name, the credential, and the picture. The quote is in a bold, 24px (H5) font so that it stand out prominently against the rest of the body content. The name and the credential are absolutely necessary to give appropriate credit to the origin of the quote, and appropriate context to the reader. The picture is not required, but an image can help to make a quote more personal and human.


    Editorial:

    Pullquotes should be presented as easily consumable snippets of information, and generally shouldn't take a reader more than five seconds to read. It is also important to be certain that your Pullquote is not misleading. It is crucial to make sure that the meaning of the quote does not change when taken out of its original context, even if reading the body content would clear up the misunderstanding.

  • World Bank Feature Story:

    In this case, just a short, single-sentence quote helps to humanize the story while simultaneously highlighting positive results.


    World Bank Feature Story:

    In this example, the Pullquote component is being used to present a standalone quote that is not present in the body text. In cases like this, it is appropriate to present longer quotes which require more time to read.