Skip to main content

Quote

Highlight a compelling quotation

Overview #

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

Examples #


<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>
<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>
<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>
<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.