Quote

Attributed quotes for pull quotes in articles and testimonials on store pages. Supports role colors on the accent edge and a card variant for testimonials.

Pull quote

<div class="ln-quote ln-quote--pull">
  <p class="ln-quote__text">Every vertical measurement lands on an 8px grid,
     and every line of running text sits on a 24px line grid.</p>
  <footer class="ln-quote__footer">
    <cite class="ln-quote__cite">Design system principles</cite>
  </footer>
</div>

Every vertical measurement lands on an 8px grid, and every line of running text sits on a 24px line grid.

Card testimonial

<div class="ln-quote ln-quote--card">
  <p class="ln-quote__text">The rhythm system made our layouts consistent
     across every page without any manual adjustment.</p>
  <footer class="ln-quote__footer">
    <div class="ln-avatar ln-avatar--sm">
      <span class="ln-avatar__initials">JD</span>
    </div>
    <cite class="ln-quote__cite">Jane Doe, Engineering Lead</cite>
  </footer>
</div>

The rhythm system made our layouts consistent across every page without any manual adjustment.

Reference

Class	Description	Responsive
`.ln-quote`	Blockquote container (serif font)	No
`.ln-quote__text`	Quote body text (italic)	No
`.ln-quote__footer`	Attribution row with avatar and cite	No
`.ln-quote__cite`	Citation text	No
`.ln-quote__avatar`	Author photo in the footer	No
`.ln-quote--pull`	Pull-quote style with left accent border	No
`.ln-quote--card`	Card-style with background and border-radius	No
`.ln-quote--bordered`	Outlined with border and padding	No
`.ln-quote--{role}`	Role colour (primary, success, warning, danger, info, secondary)	No