Skip to main content

Quote

JSThis component requires JavaScript.
A Quote displays an impactful quotation from a person, like students, alumni, faculty or another source.

Example

Portrait of a woman.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit amet elit.”

Source Name
Attribution
<figure class="bux-quote">
<img
class="bux-image bux-quote__image bux-image--1x1"
src="/images/placeholders/osu-bux-4.jpg"
alt="Portrait of a woman."
/>

<blockquote class="bux-quote__blockquote" cite="#">
<p class="bux-quote__text">
&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium
pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit
amet elit.&rdquo;
</p>
</blockquote>
<figcaption class="bux-quote__figcaption">
<div class="bux-quote__author">Source Name</div>
<cite class="bux-quote__source">Attribution</cite>
</figcaption>
</figure>

Usage

Dos

  • Limit to one or two most impactful Quotes per page
  • Limit quotations to 1-2 sentences
  • Use Quotes to break up long-form content
  • Related the Quote to surrounding content
  • Provide the source’s name, attribution and headshot, if possible
  • Use <cite> and the cite attribute only for referring to works such as books, articles, or speeches. cite is not used for referring to the name of the quoted person.

Don’ts

  • Don’t overuse Quotes on one page; many Quotes can lose impact
  • Don’t place a Quote in a narrow column
Back to top