Quote

Ready

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

Example#

“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" src="#" alt="1:1 image placeholder" />
  <blockquote class="bux-quote__blockquote" cite="#">
    <p class="bux-quote__text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </blockquote>
  <figcaption class="bux-quote__figcaption">
    <div class="bux-quote__author">Source Name</div>
    <cite class="bux-quote__source">Attirbution</cite>
  </figcaption>
</figure>

{% for item in items %}
	<figure class="bux-quote">
		{% if item.quote_image %}
			{% render '@image--1-by-1' with {class:"bux-quote__image"} %}
		{% endif %}
		<blockquote class="bux-quote__blockquote" {% if item.cite %} cite="{{ item.cite }}" {% endif %}>
			<p class="bux-quote__text">&ldquo;{{ item.text }}&rdquo;</p>
		</blockquote>
		<figcaption class="bux-quote__figcaption">
			<div class="bux-quote__author">{{ item.source }}</div>
			<cite class="bux-quote__source">{{ item.attribution }}</cite>
		</figcaption>
	</figure>
{% endfor %}

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