CBP UI Library

Pull Quote 

<blockquote class="pullQuote">
    <span class="pullQuote__quote">″Donec at aliquam tellus, sed facilisis ante. Nulla ornare diam nisl, eget volutpat turpis cursus in. Ut porttitor sit amet massa sit amet tempor.″</span>
    <cite class="pullQuote__attribution">Lorem Ipsum</cite>
</blockquote>

<link media="all" rel="stylesheet" href="/pull-quote/pull-quote.css" />
<script src="/pull-quote/pull-quote.js"></script>
 
<blockquote class="pullQuote">
  <span class="pullQuote__quote">{{ quote }}</span>
  {% if speaker %}<cite class="pullQuote__attribution">{{ speaker }}</cite>{% endif %}
</blockquote>

{% import "_macros.twig" as h %}
{{ h.componentAssets('pull-quote') }}
 
{
  "quote": "″Donec at aliquam tellus, sed facilisis ante. Nulla ornare diam nisl, eget volutpat turpis cursus in. Ut porttitor sit amet massa sit amet tempor.″",
  "speaker": "Lorem Ipsum"
}
  • Content: 
    $barWidth: 20px;

.pullQuote {
  font-size: var(--step-1);
  line-height: 1.2;
  font-style: italic;
  position: relative;
  padding-inline-start: calc(#{$barWidth} + 1em);
  padding-block: 0.2em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;

  &:before {
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    width: $barWidth;
    display: block;
    position: absolute;
    background-color: var(--blue);
  }
}
.pullQuote__attribution {
  &:before {
    content: "\2014\00a0";
  }
}
  • URL: /components/raw/pull-quote/pull-quote.scss
  • Filesystem Path: src/components/pull-quote/pull-quote.scss
  • Size: 504 Bytes

No notes defined.