Quote
Component status:Ready
A Quote displays an impactful quotation from a person, like students, alumni, faculty or another source.
#
Example<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">“{{ item.text }}”</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 thecite
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