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>

Elements #

Element	Description	Usage	Required	Multiple
Avatar	Avatar image of the person who said the quote	Use an avatar component	Avatar is optional	Component may contain only one Avatar
Quote text	Text of the quotation	Limit to 1-2 short sentences. Do not include quotation marks.	Quote text is required	Component may contain only one Quote text
Citation	Source of the quoted text	Cite a quotation's source whenever possible	Citation is optional	Component may contain only one Citation

Usage #

Do

Use to highlight a compelling quotation by a student, faculty member, administrator, or alum

Don't

Place in very narrow content containers like a sidebar

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.