Quote

JSThis component requires JavaScript.

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

Example

“The Ohio State University was born of a radical promise, that higher education would not be a privilege to guard, but an opportunity to share.”

Margaret Young

Dean and director, Ohio State Lima

<figure class="bux-quote">
  <figure class="bux-image bux-quote__image">
    <img
      class="bux-image--1x1"
      src="/images/placeholders/c1920_margaret_young.jpg"
      alt=""
      height=""
      width=""
    />
  </figure>
  <blockquote class="bux-quote__blockquote">
    <p class="bux-quote__text">
      “The Ohio State University was born of a radical promise, that higher
      education would not be a privilege to guard, but an opportunity to share.”
    </p>
  </blockquote>
  <figcaption class="bux-quote__figcaption">
    <div class="bux-quote__author">Margaret Young</div>
    <cite class="bux-quote__source">Dean and director, Ohio State Lima</cite>
  </figcaption>
</figure>

{#
Buckeye UX - version 1.6.5
Copyright (C) 2026 The Ohio State University
#}

{#

Quote

Available Variables:
  - image_url:        URL for an optional image
  - image_alt:        Alt text for the optional image (required if using an image)
  - cite:             Optional. Optional URL to the source of the quotation
  - text:             Text of the quote
  - source:           Optional. Source of the quote -- typically, a person's name
  - attribution:      Optional. A text representation for the source of the quote
  - attrs:            Optional. Deprecated, will be removed in v2.0.0. Use `html_attributes` instead.
  - html_attributes:  Optional. Additional attributes to apply to the quote's figure element.

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: 08-11-2026 13:26:24
#}

{% import '@bux/_macros/attributes.twig' as Attributes %}

{% set html_attributes = attrs|default({})|merge(html_attributes|default({})) %}
{% if attrs %}
  {% deprecated 'The "attrs" prop is deprecated in bux:quote and will be removed in v2.0.0. Use "html_attributes" instead.'
  %}
{% endif %}

{% set figure_attributes =
  html_attributes|merge({
    class: ('bux-quote ' ~ (html_attributes.class|default('')))|trim
  })
%}

<figure {{ Attributes.render(figure_attributes) }}>
  {% if image_url and image_alt %}
    {% include '@bux/image/image.twig' with {
      image_class: 'bux-quote__image',
      image_url,
      image_alt,
      image_ratio: '1x1'
    } only %}
  {% endif %}
  <blockquote class="bux-quote__blockquote" {{ cite ? ' cite="' ~ cite ~ '"' : '' }}>
    <p class="bux-quote__text">
      “{{ text }}”
    </p>
  </blockquote>
  {% if source or attribution %}
    <figcaption class="bux-quote__figcaption">
      <div class="bux-quote__author">
        {{ source }}
      </div>
      <cite class="bux-quote__source">{{ attribution }}</cite>
    </figcaption>
  {% endif %}
</figure>

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