Quote

Overview

A stylized block of text used to highlight a specific statement or passage, typically attributed to a source, to emphasize important content.

Default – Without image

In its default state, the quote component displays only the text, author’s name, and title without any accompanying image.

HTML Example:

<div class="bt1d-quote">
  <div class="bt1d-quote__content-wrap">
    <h2 class="bt1d-quote__quote-text">Reprehenderit deserunt officia adipisicing sit laborum culpa.</h2>
    <p class="bt1d-quote__author-name">Author</p>
    <p class="bt1d-quote__author-title">Author Title</p>
  </div>
</div>

With image

The quote component can be enhanced by including an image to represent the source visually. By default, the image will be positioned on the content’s left side. Alternatively, you can move the image to the right by adding the bt1d-quote--media-on-right class.

Reprehenderit deserunt officia adipisicing sit laborum culpa.

A.B. Other

Chief Scientist

HTML Example (Default: Media on Left):

<div class="bt1d-quote">
  <figure class="bt1d-quote__figure" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://placehold.co/600x400" alt="Placeholder 600x400" class="bt1d-quote__img">
  </figure>

  <div class="bt1d-quote__content-wrap">
    <h2 class="bt1d-quote__quote-text">Reprehenderit deserunt officia adipisicing sit laborum culpa.</h2>
    <p class="bt1d-quote__author-name">Author</p>
    <p class="bt1d-quote__author-title">Author Title</p>
  </div>
</div>

With image – Media on the right

.bt1d-quote--media-on-right

Reprehenderit deserunt officia adipisicing sit laborum culpa.

A.B. Other

Chief Scientist

HTML Example:

<div class="bt1d-quote bt1d-quote--media-on-right">
  <figure class="bt1d-quote__figure" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://placehold.co/600x400" alt="Placeholder 600x400" class="bt1d-quote__img">
  </figure>

  <div class="bt1d-quote__content-wrap">
    <h2 class="bt1d-quote__quote-text">Reprehenderit deserunt officia adipisicing sit laborum culpa.</h2>
    <p class="bt1d-quote__author-name">Author</p>
    <p class="bt1d-quote__author-title">Author Title</p>
  </div>
</div>