Typography

Quote

Words that belong to someone else, set apart from yours.

On this page

A quote sets someone else's words apart from yours. In running text it hangs from a soft rail at its start, in the ink of a heading. The rail is drawn with round ends, not a border, so it never ends in a corner.

Quote

PreviewCode

<blockquote class="quote max-w(420) mx-auto">  <p class="quote-text">Good tools make the next step clear and leave room for the work.</p>  <footer class="quote-source">    <span class="avatar avatar-sm">      <img class="avatar-image" src="/demo/portrait-1.svg" alt>    </span>    <span>      <span class="quote-name">Alex Morgan</span>Design lead, Atlas</span>  </footer></blockquote>

Put each paragraph of the quotation in a quote-text. The source is a <footer> with quote-source: an avatar if there is one, a quote-name in ink, and a quiet line for a role or a place. Put the title of a work in <cite>.

#Pull quote

quote-lg is a pull quote: the words carry it. The rail gives way to an opening mark, and the lines are balanced. Use one on a page, and keep it to a sentence or two.

Pull quote

PreviewCode

<blockquote class="quote quote-lg max-w(480) mx-auto">  <p class="quote-text">We replaced four libraries with a stylesheet, and the interface got quieter.</p>  <footer class="quote-source">    <span class="avatar">      <img class="avatar-image" src="/demo/portrait-3.svg" alt>    </span>    <span>      <span class="quote-name">Sam Lee</span>Engineering,      <cite>Orbit Review</cite>    </span>  </footer></blockquote>

#Several paragraphs

Several paragraphs

PreviewCode

<blockquote class="quote max-w(420) mx-auto">  <p class="quote-text">The first version shipped with eleven components. We thought that was a start.</p>  <p class="quote-text">It turned out to be most of what an interface needs, most of the time.</p></blockquote>

#Accessibility

Use <blockquote> for a quotation set apart and <q> for one inside a sentence. A cite attribute can carry the source's URL.
The opening mark of a pull quote is decoration drawn by the stylesheet; it is not read. Do not type quotation marks into a pull quote as well.
The source's avatar repeats the name beside it, so its alt is empty.

#Classes

Class	Description
`quote`	The quotation, hung from a 2px rail at its start
`quote-lg`	A pull quote: larger words with balanced lines under an opening mark instead of the rail. With `quote`
`quote-text`	A paragraph of the quotation
`quote-source`	Who said it and where: an optional avatar beside a name and a muted line
`quote-name`	The name, in strong ink on its own line

#Source

@master/ui/components/quote.css

/* * Quote: someone else's words, set apart from yours. * A quotation in running text hangs from a soft rail at its start. A large one is a pull quote: the words * carry it, balanced over their lines, under an opening mark. The source follows, quiet, with a name in ink. */@layer components {  .quote {    position: relative;    display: grid;    gap: .75rem;    min-width: 0;    margin: 0;    padding: .125rem 0 .125rem 1.125rem;    color: var(--color-text-strong);    font-size: .9375rem;    line-height: 1.6;    &:dir(rtl) {      padding: .125rem 1.125rem .125rem 0;    }    /* The rail: two pixels of line with round ends. It is drawn, not a border, so it never ends in a corner. */    &::before {      content: '';      position: absolute;      inset-block: 0;      inset-inline-start: 0;      width: 2px;      border-radius: 999px;      background: var(--color-line-strong);    }    /* Large: a pull quote. The rail gives way to an opening mark, and the words are balanced. */    &.quote-lg {      gap: 1.25rem;      padding: 0;      font-size: 1.375rem;      line-height: 1.4;      letter-spacing: -.015em;      &::before {        position: static;        width: 1.75rem;        height: 1.25rem;        border-radius: 0;        background: var(--color-line-mark);        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M0 20v-7.2C0 5.9 3.5 1.4 10.4 0l1.3 2.8C8.2 4 6.4 6.3 6.2 9.6H12V20zm16 0v-7.2C16 5.9 19.5 1.4 26.4 0l1.3 2.8C24.2 4 22.4 6.3 22.2 9.6H28V20z'/%3E%3C/svg%3E") center / contain no-repeat;      }      &:dir(rtl)::before {        scale: -1 1;      }      .quote-text {        text-wrap: balance;      }    }    @media (forced-colors: active) {      &::before {        background: CanvasText;      }    }  }  /* A paragraph of the quotation. */  .quote-text {    margin: 0;    text-wrap: pretty;    overflow-wrap: anywhere;    hanging-punctuation: first;  }  /* Who said it, and where: an avatar, a name in ink and a quiet line. Put the title of a work in <cite>. */  .quote-source {    display: flex;    align-items: center;    gap: .625rem;    min-width: 0;    color: var(--color-text-muted);    font-size: .8125rem;    font-style: normal;    line-height: 1.4;    letter-spacing: 0;  }  .quote-name {    display: block;    color: var(--color-text-strong);    font-weight: var(--font-weight-control);  }}