Pullquote

Default pullquote

HTML


<blockquote class="orc-c-pullquote">

  <div class="orc-c-pullquote__text">
    <div class="orc-c-pullquote__quote">This is a quote by someone, enlarged to show distinction among the rest of the text.</div>
    <cite class="orc-c-pullquote__citation">— Johnny John Smith , </cite><span class="orc-c-pullquote__meta">Google review</span>
  </div>
  <!--end orc-c-pullquote__text-->

</blockquote>
<!--end orc-c-pullquote-->

When to use

When there’s a particularly emblematic quote from a person or from the text on a page, use a pullquote as a representation of the text around it. We typically use a pullquote to quote a person, such as a guest who has left a great review of their stay.

When to consider an alternative

There isn’t a comparable or better component for a given situation, but do be judicious with pullquotes. The quotes used should always be exceptional in some way, whether pulled from a person or text.

Class Name	Description
`orc-c-pullquote` Required	Apply to the pullquote’s containing `blockquote` tag. This sets the layout for the pullquote text within.
`orc-c-pullquote__text` Required	Apply to the `div` within the `orc-c-pullquote` that contains the quote and citation.
`orc-c-pullquote__quote` Required	Apply to the `div` within the `orc-c-pullquote__text` to represent the actual quote from the cited source.
`orc-c-pullquote__citation` Required	Apply to the `cite` tag below to the quote. This represents the actual cited source of the quote.
`orc-c-pullquote__meta`	Apply to `span` tag within `orc-c-pullquote__citation` to represent the cited source’s organization or the name of the review platform where the quote is from.

Default pullquote `orc-c-pullquote`

Usage

When to use

When to consider an alternative