Components / Content patterns

Quote

Large editorial quotations or compact testimonials, with independently optional attribution.

Basic structure

figure.quote > blockquote + optional figcaption

Quote owns quotation text and attribution. Media row is the reusable small-visual-and-text layout used for photo attributions, activity updates and biographies.

Try it Quote size Accent emphasized words Attribution Center Decorative quotation mark Name Name text Role Role text Photo

Example quotation using the default large style.

Example personDesigner

HTML

<figure class="quote"><blockquote><p>Example quotation using the default large style.</p></blockquote><figcaption class="media"><img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48"><div class="media-content"><strong>Example person</strong><span>Designer</span></div></figcaption></figure>

Compact usage

Use quote is-small inside an Inset or a proof lane. These examples use the same Quote component; there is no separate Testimonial API.

Supporting proof

A quotation can support the surrounding content.

HTML

<article class="card is-padded"><div class="content block"><h3 class="like-h4">Supporting proof</h3><p>A quotation can support the surrounding content.</p></div><aside class="inset"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></aside></article>

Example personDesigner

“A compact quotation can use exactly the same attribution.”

Example personDesigner

“A compact quotation can use exactly the same attribution.”

Example personDesigner

“A compact quotation can use exactly the same attribution.”

Example personDesigner

“A compact quotation can use exactly the same attribution.”

Example personDesigner

“A compact quotation can use exactly the same attribution.”

Example personDesigner

“A compact quotation can use exactly the same attribution.”

HTML

<div class="marquee" data-marquee tabindex="0" role="region" aria-label="Illustrative quotations"><div class="marquee-line"><div class="marquee-set"><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div><div class="proof-item"><figure class="quote is-small is-profile">
  <figcaption class="media">
    <img class="media-avatar is-rounded" src="/assets/images/pattern-example.svg" alt="" width="48" height="48">
    <div class="media-content"><strong>Example person</strong><span>Designer</span></div>
  </figcaption>
  <blockquote><p>“A compact quotation can use exactly the same attribution.”</p></blockquote>
</figure></div></div></div></div>

Options

Class or attribute	What it does
`default / is-medium / is-small`	Responsive large editorial type, medium quotation, or compact body-sized text for Insets and Marquees.
`is-accented`	Opt-in color emphasis for strong or mark within the quotation; quote-accent-color follows the local primary unless set separately.
`text-center`	Center the quote and attribution group.
`figcaption + media-avatar + media-content`	Optional photo, name and role. Omit any combination; omit figcaption when none are present.
`is-profile`	Place attribution above the quotation. Default placement is below.
`quote-mark / quote-brand`	Optional decorative quotation mark inside blockquote, or a brand in the attribution row.
`columns + figure`	Optional side image; no separate quote-image component.