Quote Component

A common technique when working on text layout is to use a Pull Quote or Blockquote. This takes an excerpt of text and makes it eye-catching or stand out when scanning the page. Use quotes to highlight important text from the page, or cite a source using Citation URL. This component also includes some behind-the-scenes code to let the browser and non-sighted visitors know that the block of text is a quote and should be displayed or read as such. Quotes are dispayed in an italicized serif font (also used in the hero area), include a thick border to indicate the quote, and can be left, center, or right aligned.

Component Fields

Quote

The text being quoted. Keep this brief and attention grabbing. Text is displayed in an italicized text to make it stand out on the page as quote. (recommended maximum: ~ 4 to 5 lines, this will vary by location and device width)

Author (Optional)

Credit the person who is being quoted, displayed below the quote. (e.g. George Orwell)

Source (Optional)

Where the quote is from, displayed below the quote. Displays after the Author if one is included. (e.g. 1984)

Citation (URL) (Optional)

The URL or path to a file where the quote is from. Use the file icon to select a WKU web page or file using the dependency manager, or enter a full url starting with http:// or https://.

If a Citation URL is included the Source or Author will be linked (Source if available, Author if not). If there is no Source or Author it is still good to include for accessibility purposes.

Style

Controls the alignment of the quote. Right aligned quotes will display the border on the right hand side.

• Left (Default)
• Center
• Right

Examples

Example 1

A quote including an author, a source, and a citation link.

Quote:Thank you for your persistence in creating a unique WKU Experience and for your dedication to transforming the lives of those on our Hill. Thank you for your commitment to higher education and to WKU. And thank you for doing your part to ensure a strong future for our students and our university.
Author: President Caboni
Source: A Note of Gratitude
Citation (URL): https://www.wku.edu/caboni/news/index.php
Text Alignment: Left

Example 2

These Examples uses the Text Alignment Option to generate a center aligned and right aligned quote.

Quote: It was a bright cold day in April, and the clocks were striking thirteen.
Author: George Orwell
Source: 1984, (Chapter I, Part I)
Citation (URL): http://www.george-orwell.org/1984/0.html
Text Alignment: Center

Quote: It was a bright cold day in April, and the clocks were striking thirteen.
Author: George Orwell
Source: 1984, (Chapter I, Part I)
Citation (URL): http://www.george-orwell.org/1984/0.html
Text Alignment: Right

Example 3

This example demonstrates how a quote could be used in a layout. Using an Offset Column Snippet between two paragraphs, the quote can appear be 'pulled' out of the layout. This example does not use the optional author or a source since there is not one.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quote: Lorem ipsum dolor sit amet
Author: N/A
Source: N/A
Citation (URL): N/A
Text Alignment: Left