Quotes

Use quotes to create a blockquote element that stands out from the page. Quotes should be in the brand voice, and should directly support the purpose/content of the page they’re found on. For example, a quote might be a testimonial from a student on a program page related to their major.


Overview

Here’s an example quote:

Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.
Paul Rand

Quotes require a citation, even if only to say “Anonymous”. An image is optional, but helps connect the quote with the author.

Adding a Quote

On sites using the Block Editor, quotes (Quote block editor icon) can be added from the block library, under the Component Library section. Quote content can be edited directly.

On sites using the older Visual Editor, quotes can be added by choosing the Quote pictograph (Quote WYSIWYG toolbar icon) from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the quote later, double-click the quote preview to show the editor dialogue again.


Technical Details

Quotes can be implemented with the shortcode cl-quote.

[cl-quote quote="The only thing we have to fear is fear itself." citation="Franklin D. Roosevelt"]

Attributes

quote

(string) (required)

The quote

citation

(string) (required)

The citation

img

(string) (optional)

The URL of an image

(default value: none)

alt

(string) (optional)

Alt text for the image

(default value: none)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)