Blockquote

<figure class="c-blockquote o-container" data-bkg-theme="base">
    <blockquote class="c-blockquote__content">
        <span class="c-blockquote__icon" aria-hidden="true"><svg width="32" height="27" viewBox="0 0 32 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="u-ct-fill" d="M31.16 20.48C31.16 17.44 29.72 14 23.88 14H22.04C22.68 9.12 25.64 6.16 30.92 3.36L29.64 0.879998C21.72 4.56 17.32 9.52 17.32 18.08C17.32 23.04 20.12 26.4 25 26.4C28.68 26.4 31.16 23.68 31.16 20.48ZM13.96 20.48C13.96 17.44 12.52 14 6.68 14H4.84C5.48 9.12 8.44 6.16 13.72 3.36L12.44 0.879998C4.52 4.56 0.12 9.52 0.12 18.08C0.12 23.04 2.92 26.4 7.8 26.4C11.48 26.4 13.96 23.68 13.96 20.48Z" />
            </svg>
        </span>
        <p class="c-blockquote__quote">I loved every expedition I was on, every one of them — even when they were dangerous, uncomfortable, difficult… that was all just part of the experience. I wouldn’t have passed them up for anything.</p>
        <figcaption class="c-blockquote__caption">
            <p class="c-blockquote__attribution f-text--attribution f-upper">
                Robert peck
            </p>
            <p class="c-blockquote__attribution-byline f-text--attribution-byline">
                <cite>Senior Fellow</cite>
            </p>
        </figcaption>
    </blockquote>
</figure>
<figure class="c-blockquote o-container" data-bkg-theme="base">
	<blockquote class="c-blockquote__content">
		<span class="c-blockquote__icon" aria-hidden="true">{% include '03-icons/quote' %}</span>
		<p class="c-blockquote__quote">{{ quoteText }}</p>
    <figcaption class="c-blockquote__caption">
      <p class="c-blockquote__attribution f-text--attribution f-upper">
        {{ attribution }}
      </p>
      <p class="c-blockquote__attribution-byline f-text--attribution-byline">
        <cite>{{ attributionByline }}</cite>
      </p>
    </figcaption>
	</blockquote>
</figure>
{
  "pageColorTheme": "teal",
  "quoteText": "I loved every expedition I was on, every one of them — even when they were dangerous, uncomfortable, difficult… that was all just part of the experience. I wouldn’t have passed them up for anything.",
  "attribution": "Robert peck",
  "attributionByline": "Senior Fellow"
}
  • Content:
    .c-blockquote {
      margin-bottom: 2rem;
    
      @include break($sm) {
        display: flex;
        flex-direction: column;
        max-width: 110rem;
        margin: 10rem auto;
        align-items: center;
      }
    }
    
    .c-blockquote__quote {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: var(--ct-dark);
      font-size: 2.4rem;
      font-weight: 400;
      font-family: $f-serif;
      line-height: 1.4;
      @include break($sm) {
        font-size: 5.4rem;
      }
    }
    
    .c-blockquote__icon {
      display: block;
      color: var(--ct-dark);
      margin-bottom: 2.4rem;
      @include break($sm) {
        margin-bottom: 4.8rem;
      }
      svg {
        display: block;
        width: 40px;
        height: auto;
        @include break($sm) {
          width: 56px;
        }
      }
    }
    
    .c-blockquote__caption {
      margin-top: 3.5rem;
      @include break($sm) {
        margin-top: 6.4rem;
      }
    }
    
    .c-blockquote__attribution-byline {
      margin-top: 1rem;
    }
    
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: patterns\06-components\blockquote\blockquote.scss
  • Size: 951 Bytes

No notes defined.