Quote

JSThis component requires JavaScript.

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 lorem ipsum imperdiet. Lorem ipsum dolor 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="Portrait of a woman."
    height=""
    width=""
  />

  <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 lorem ipsum imperdiet. Lorem ipsum dolor 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.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Quote

Available Variables:
  - items:  Array containing quote items: image_url, image_alt, cite, text, source, attribution.

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 11:56:41
#}

{% for item in items %}
  <figure class="bux-quote">
    {% if item.image_url %}
      {% set image_url = item.image_url %}
      {% set image_alt_text = item.image_alt %}
      {% set class = 'bux-quote__image bux-image--1x1' %}
      {% include '@bux/image/image.twig' %}
    {% endif %}
    <blockquote class="bux-quote__blockquote" {{ item.cite ? ' cite="' ~ item.cite ~ '"' : '' }}>
      <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 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