Quote
JSThis component requires JavaScript.
Component status: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.”
<figure class="bux-quote">
<img
class="bux-image bux-quote__image bux-image--1x1"
src="/images/placeholders/osu-bux-4.jpg"
alt=""
/>
<blockquote class="bux-quote__blockquote" cite="#">
<p class="bux-quote__text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium
pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit
amet elit.”
</p>
</blockquote>
<figcaption class="bux-quote__figcaption">
<div class="bux-quote__author">Source Name</div>
<cite class="bux-quote__source">Attribution</cite>
</figcaption>
</figure>
{#
Buckeye UX - version 1.0.15
Copyright (C) 2024 The Ohio State University
#}
{#
Quote
Available variables:
- items: Array containing the quote items
- item.image_url: URL for the quote's image.
- item.image_alt: Alt text for the quote's image.
- item.cite: URL for source attribution.
- item.text: Content of the quote.
- item.source: String for the quote's source.
- item.attribution: String for the quote's attribution.
#}
{% for item in items %}
<figure class="bux-quote">
{% if item.image_url %}
{% set image_url = item.image_url %}
{% set image_alt = item.image_alt %}
{% set class = "bux-quote__image bux-image--1x1" %}
{% include base_path ~ directory ~ bux ~ '/twig/image.twig' %}
{% 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