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.”

Source Name

Attribution

<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">
      &ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium
      pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit
      amet elit.&rdquo;
    </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.12
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">&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