Quote

Highlight a compelling quotation

Overview #

Use the quote component to highlight compelling quotations from people like students, alumni, faculty, and administrators.

Examples #

Choose an example

Open in new window Copy link to example

<div class="rvt-quote">
  <blockquote class="rvt-quote__text">
    <p>One of the reasons I chose IU is because when I got there, it just felt like a really nice community.</p>
  </blockquote>
</div>

Open in new window Copy link to example

<div class="rvt-quote">
  <blockquote class="rvt-quote__text">
    <p>One of the reasons I chose IU is because when I got there, it just felt like a really nice community.</p>
  </blockquote>
  <p class="rvt-quote__citation">
    <span class="rvt-quote__title">Author Name</span>
    <span class="rvt-quote__subtitle">Writer of books, PhD</span>
  </p>
</div>

Open in new window Copy link to example

<div class="rvt-quote rvt-quote--image">
  <div class="rvt-avatar rvt-avatar--md">
    <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
  </div>
  <blockquote class="rvt-quote__text">
    <p>One of the reasons I chose IU is because when I got there, it just felt like a really nice community.</p>
  </blockquote>
</div>

Open in new window Copy link to example

<div class="rvt-quote rvt-quote--image">
  <div class="rvt-avatar rvt-avatar--md">
    <img class="rvt-avatar__image" src="https://rivet.iu.edu/img/placeholder/avatar-1.webp" alt="">
  </div>
  <blockquote class="rvt-quote__text">
    <p>One of the reasons I chose IU is because when I got there, it just felt like a really nice community.</p>
  </blockquote>
  <p class="rvt-quote__citation">
    <span class="rvt-quote__title">Author Name</span>
    <span class="rvt-quote__subtitle">Writer of books, PhD</span>
  </p>
</div>

Usage #

Avatars and citations are optional. You can omit the elements with the .rvt-avatar__image and .rvt-avatar__citation classes if you don’t need them.
Citation subtitles are optional. You can omit the element with the .rvt-avatar__subtitle class if you only need the primary citation title.

Do

Use to highlight a compelling quotation by a student, faculty member, administrator, or alum
Use to break up long sections of content on a page
Cite a quotation's source whenever possible
Use .jpg, .png, or .webp avatar images

Don't

Include quotation marks
Use quotations longer than 1–2 short sentences
Place in very narrow content containers like a sidebar
Use a non-square avatar image

Accessibility #

Use an empty alt attribute. You don’t need to use the person’s name as the value of the avatar’s alt attribute.