Quote

On desktop the attribution sits in columns 1 to 3 and the quote in columns 5 to 12. On tablet the attribution sits in columns 1 and 2 and the quote in columns 3 to 8. On mobile they stack. The quote uses the Quote style, which steps from 24/32 on mobile to 28/36 on tablet and 32/40 on desktop. The text below is placeholder copy.

Role or label

Company type, not a name

Quote text goes here. Use a real quote, and attribute it by role and company type unless the person has agreed to be named.

View HTML

<figure class="cs-quote">
  <div class="cs-quote__who">
    <p class="cs-quote__subhead type-subhead">Role or label</p>
    <figcaption class="cs-quote__role type-small">Company type, not a name</figcaption>
  </div>
  <blockquote>
    <p>Quote text goes here. Use a real quote, and attribute it by role and company type unless the person has agreed to be named.</p>
  </blockquote>
</figure>

Quote with placeholder text

Tablet

From 768 to 1023px the offset split uses the 8-column grid with 16px gutters. The content is 704px wide, with 32px page padding. The same layout applies to the quote in a case study's Outcome block. The frame below is 768px wide, so it shows the tablet layout on any screen.

The offset split at 768px.

Using the quote

Do

Use a real quote with a real source.
Attribute by role and company type when the work is under NDA.
Use a <figure> with a <blockquote> and a <figcaption>.

Don't

Name a person who has not agreed to it.
Write or polish a quote for someone.

Up next

List row

A full-width row that is one link, with a trailing arrow.

Continue to List row

Back to Stat strip