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>

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.