Davidson Styleguide

Pullquote 

<div class="pullquote ">
    <div class="pullquote__quote">
        <p class="">
            <strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers.
        </p>
    </div>
    <div class="pullquote__meta">
        <cite>Edgar Rice Burroughs, <em>Princess of Mars</em></cite>
    </div>
</div>
 
<div class="pullquote {{ pullquote.variant }}">
  <div class="pullquote__quote">
    {% block pullquote_quote %}
      {% include pullquote.pattern with { p: pullquote.p }  %}
    {% endblock %}
  </div>
  <div class="pullquote__meta">
    {% block pullquote_meta %}
      {% include '@cite' with { cite: pullquote.cite } %}
    {% endblock %}
  </div>
</div>
 
{
  "pullquote": {
    "pattern": "@p",
    "p": {
      "content": "<strong>The water which supplies the farms of Mars</strong> is collected in immense underground reservoirs <em>at either pole</em> from the melting ice caps, and pumped through long conduits to the various populated centers."
    },
    "cite": {
      "citation": "Edgar Rice Burroughs, <em>Princess of Mars</em>"
    }
  }
}
  • Content: 
    .pullquote {
  p {
    &::before {
      content: '“';
    }

    &:last-of-type::after {
      content: '”';
    }
  }
}
  • URL: /components/raw/pullquote/pullquote.scss
  • Filesystem Path: patterns/molecules/blocks/pullquote/pullquote.scss
  • Size: 125 Bytes

The “pullquote” pattern should be used for direct quotations such as testimonials. Quotation marks are automatically added around the block, so they should not be included in the text. There is also a citation field used to identify the speaker.

This is distinct from the “pulltext” pattern, which is used to highlight an excerpt of content.