Blockquote block

The Blockquote block is used to highlight quotations. Multiple options are available.

Quote with image Quote with no image Inline box Full-width tall

Quote with image

This updated design is available in Drupal 2.0 as a block on the Page content type. There is currently only one style available, but more styles will be available in the future. Use the code snippet below to use this style on the News, Story or Layout content types.

Flowering cherry trees line the UW quad, taken from above. — Optional name
Optional org, Optional title

Code

<!-- Quote with image -->
<figure class="blockquote relative blockquote-outer-lines grid! grid-cols-1 md:grid-cols-[310px_minmax(200px,_1fr)] lg:grid-cols-[420px_minmax(200px,_1fr)] my-md-5 my-4">
  <div class="blockquote-image-wrapper px-11 py-10 md:px-14 md:py-13 lg:p-15 relative blockquote-image-line">
    <img class="aspect-square object-cover max-w-full md:max-w-[210px]! lg:max-w-[310px]! mb-0" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/04/uw-cherry-blossoms-750x500.jpg" alt="">
  </div>
  <div class="blockquote-content relative blockquote-content-lines flex flex-col justify-between pt-0 pb-8 px-12 md:p-14! md:pl-6! lg:py-12! lg:pr-16!">
    <div>
      <i class="fa-sharp fa-solid fa-quote-left text-[4rem] text-heritage-gold mb-0 lg:mb-[1rem]" aria-hidden="true"></i>
      <blockquote class="blockquote-quote text-lg mb-[1rem] border-0! p-0!">
        <p style="font-size: 1.125rem;">Space for the quote in the Blockquote block.</p>
      </blockquote>
    </div>
    <div class="text-right self-end">
      <p class="block! text-base! p-0 mb-[1rem]">
        <span class="font-bold">First name last name or any name</span>
        <span><br>Optional organization, Optional title</span>
      </p>
    </div>
  </div>
</figure>

Quote with no image

The Drupal 2.0 block can currently support when there is no image. The source of the quote and the person's organization or job title are also optional. Use the code snippet below to use the no-image style on a News, Story or Layout content types.

This is a quote with no image. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Morbi tincidunt augue interdum velit. At ultrices mi tempus imperdiet nulla sit amet interdum consectetur.

Code

<!-- Quote with no image -->
<figure class="blockquote relative blockquote-outer-lines block w-full my-md-5 my-4">
  <div class="blockquote-content relative blockquote-content-lines flex flex-col justify-between px-12 py-10 md:p-16 lg:p-18 [&.blockquote-content-lines:before]:left-0 [&.blockquote-content-lines:before]:top-5 md:[&.blockquote-content-lines:before]:top-0 md:[&.blockquote-content-lines:before]:left-7">
    <div>
      <i class="fa-sharp fa-solid fa-quote-left text-[4rem] text-heritage-gold mb-0 lg:mb-[1rem]" aria-hidden="true"></i>
      <blockquote class="blockquote-quote text-lg mb-[1rem] border-0! p-0!">
        <p style="font-size: 1.125rem;">Space for the quote in a Blockquote block with no image</p>
      </blockquote>
    </div>
    <div class="text-right self-end">
      <p class="block! text-base! p-0 mb-[1rem]">
        <span class="font-bold">Name if applicable</span>
        <span><br>Optional organization, optional title</span>
      </p>
    </div>
  </div>
</figure>

Inline box

This block floats to the left or right of other page elements, allowing text to wrap around it. Place the custom code in the Copy Block that contains the text that you want it to float next to. To float right, change float-left to float-right and adjust the left and right margins (ml-* mr-*) accordingly.

News example

Space for the inline quote that floats to the left.

Name if applicable
Optional organization, optional title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Space for the inline quote that floats to the right.

Name if applicable
Optional organization, optional title

Code – Float left

<!-- Inline box, float left -->
<div class="my-3 float-left col-lg-5 mr-lg-5 p-0 mt-lg-0" id="blockquote">
  <figure class="blockquote relative blockquote-outer-lines block blockquote-inline">
    <div style="padding-block: 3rem; padding-inline: 3.5rem;" class="blockquote-content relative blockquote-content-lines flex flex-col justify-between [&.blockquote-content-lines:before]:left-0 [&.blockquote-content-lines:before]:top-5 md:[&.blockquote-content-lines:before]:top-0 md:[&.blockquote-content-lines:before]:left-7">
      <div>
        <i class="fa-sharp fa-solid fa-quote-left text-heritage-gold mb-0 lg:mb-[1rem]" aria-hidden="true" style="font-size: 3rem;"></i>
        <blockquote class="blockquote-quote text-lg mb-[1rem] border-0! p-0!">
          <p class="text-heritage-gold" style="font-size: 1.125rem;">Space for the quote in a Blockquote block with no image</p>
        </blockquote>
      </div>
      <div class="text-right self-end">
        <p class="block! text-base! p-0 mb-0 text-heritage-gold">
          <span class="font-bold">Name if applicable</span>
          <span><br>Optional organization, optional title</span>
        </p>
      </div>
    </div>
  </figure>
</div>

Code – Float right

<!-- Inline box, float right -->
<div class="my-3 float-right col-lg-5 ml-lg-5 p-0 mt-lg-0" id="blockquote">
  <figure class="blockquote relative blockquote-outer-lines block blockquote-inline">
    <div style="padding-block: 3rem; padding-inline: 3.5rem;" class="blockquote-content relative blockquote-content-lines flex flex-col justify-between [&.blockquote-content-lines:before]:left-0 [&.blockquote-content-lines:before]:top-5 md:[&.blockquote-content-lines:before]:top-0 md:[&.blockquote-content-lines:before]:left-7">
      <div>
        <p class="mb-0">
          <i class="fa-sharp fa-solid fa-quote-left text-heritage-gold mb-0 lg:mb-[1rem]" aria-hidden="true" style="font-size: 3rem;"></i>
        </p>
        <blockquote class="blockquote-quote text-lg mb-[1rem] border-0! p-0!">
          <p class="text-heritage-gold" style="font-size: 1.125rem; line-height: 1.55;">Space for the quote in a Blockquote block with no image</p>
        </blockquote>
      </div>
      <div class="text-right self-end">
        <p class="block! text-base! p-0 mb-0 text-heritage-gold">
          <span class="font-bold">Name if applicable</span>
          <span><br>Optional organization, optional title</span>
        </p>
      </div>
    </div>
  </figure>
</div>

Full-width tall

This design is only supported on Story and Layout content types only. There is no News or Page content type version available at this time. Note that this design will be retired soon and updated to the new, redesigned version. The redesigned version will be available in the future as a Drupal 2.0 block.

Story and Layout content type version

Code

Place this code in a Custom Block.

<!-- Full-width tall blockquote -->
<div class="mb-4 background-deferred" data-src="https://www.engr.washington.edu/sites/engr/files/news/imgs/diagonal-lines-bg.png">
  <div class="row py-3 container mx-auto pr-lg-0">
    <div class="col-lg-4 my-auto mr-lg-n5 p-4 text-white" style="z-index:2; background-color: #4b2e83">
      <blockquote class="font-weight-bold text-white quote-text my-2 border-0">
        <p style="font-size: 1.125rem; line-height: 1.55;">
          <i class="fas fa-quote-left fa-2x mb-2" aria-hidden="true"></i><br />
            "Blockquoted text goes here”
        </p>
        <footer class="mt-2 text-white font-weight-bold">
          <p style="font-size: 1em; line-height: 1.55;">— Source</p>
        </footer>
      </blockquote>
    </div>
    <div class="col-lg-8 ml-lg-n5 pr-lg-0 px-0">
      <img loading="lazy" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/04/uw-cherry-blossoms-750x500.jpg" alt="" height="513" width="770" />
    </div>
  </div>
</div>