Quote & Media

Quotes

Large, formatted quote indicated by an orange quotation mark, and accompanied by an image. Some variations offer full width orange background bars.

How to use
Specifications

Use Cases:

Highlight compelling, brief quotes.
Create a sense of familiarity and comfort for users by calling out personal anecdotes.

Guidelines:

Provide attribution, but do not use full last names of students.
Include a photo of the person who provided the quote, or a scene related to the topic of the quote. (If you don’t have an image, use the Quotes component instead.)

Avoid:

Stacking (repeating one after the other)
Using excessively long quotes
Using last names of current students in attribution
Including imagery that has nothing to do with the subject matter of the quote

Accessibility:

Include descriptive alt text for images

Dependencies:

Image

Image Dimensions:

Recommended image dimensions: 1110w x 740h (aspect ratio 3:2)

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media light gray","categories":["quotes"],"patternName":"utkwds/quote-media-light-gray"},"className":"utkwds-media-quote","backgroundColor":"light"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-light-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --><div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-light-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media Smokey","categories":["quotes"],"patternName":"utkwds/quote-media-smokey"},"className":"utkwds-media-quote","backgroundColor":"smokey"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-smokey-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default has-white-color has-text-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --><div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-smokey-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default has-white-color has-text-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media white","categories":["quotes"],"patternName":"utkwds/quote-media-white"},"className":"utkwds-media-quote","backgroundColor":"white"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-white-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --><div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-white-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:group {"metadata":{"categories":["quotes"],"patternName":"utkwds/quote-media-orange-light-gray","name":"Quote \u0026 media + orange light gray"},"align":"full","className":"utkwds-quote-media-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media light gray"},"className":"utkwds-media-quote","backgroundColor":"light"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-light-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group --><div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote u0026amp; media light gray"},"className":"utkwds-media-quote","backgroundColor":"light"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-light-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:group {"metadata":{"categories":["quotes"],"patternName":"utkwds/quote-media-orange-smokey","name":"Quote \u0026 media + orange Smokey"},"align":"full","className":"utkwds-quote-media-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media Smokey"},"className":"utkwds-media-quote","backgroundColor":"smokey"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-smokey-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default has-white-color has-text-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group --><div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote u0026amp; media Smokey"},"className":"utkwds-media-quote","backgroundColor":"smokey"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-smokey-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default has-white-color has-text-color"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra
Person Name
Title
Name of College

<!-- wp:group {"metadata":{"name":"Quote \u0026 media + orange white","categories":["quotes"],"patternName":"utkwds/quote-media-orange-white"},"align":"full","className":"utkwds-quote-media-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote \u0026 media white"},"className":"utkwds-media-quote","backgroundColor":"white"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-white-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://brand.utk.edu/web-design-system/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group --><div class="wp-block-group alignfull utkwds-quote-media-orange"><!-- wp:media-text {"align":"wide","mediaPosition":"right","mediaType":"image","metadata":{"name":"Quote u0026amp; media white"},"className":"utkwds-media-quote","backgroundColor":"white"} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile utkwds-media-quote has-white-background-color has-background"><div class="wp-block-media-text__content"><!-- wp:quote {"className":"utkwds-quote is-style-default"} -->
<blockquote class="wp-block-quote utkwds-quote is-style-default"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida dui a aliquet egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra</p>
<!-- /wp:paragraph --><cite><span class="name">Person Name</span><br><span class="title">Title</span><br><span class="college">Name of College</span></cite></blockquote>
<!-- /wp:quote --></div><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->