Quotes

Content Cards

Large, formatted quote indicated by an orange quotation mark and large text. Some variations offer full width orange or orange-textured background bars.

How to use

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.
If you have an image, consider a Quote & Media component instead.

Avoid:

Stacking (repeating one after the other)
Excessively long quotes
Using the last names of current students

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:quote {"metadata":{"categories":["quotes"],"patternName":"utkwds/quote-text-light-gray","name":"Quote text light gray"},"className":"utkwds-quote","backgroundColor":"light"} -->
<blockquote class="wp-block-quote utkwds-quote has-light-background-color has-background"><!-- 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 -->

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:quote {"metadata":{"categories":["quotes"],"patternName":"utkwds/quote-text-smokey","name":"Quote text Smokey"},"className":"utkwds-quote","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-color has-smokey-background-color has-text-color has-background has-link-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 -->

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:quote {"metadata":{"categories":["quotes"],"patternName":"utkwds/quote-text-white","name":"Quote text white"},"className":"utkwds-quote","backgroundColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-background-color has-background"><!-- 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 -->

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 text + orange light gray","categories":["quotes"],"patternName":"utkwds/quote-text-orange-light-gray"},"align":"full","className":"utkwds-quote-text-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","backgroundColor":"light"} -->
<blockquote class="wp-block-quote utkwds-quote has-light-background-color has-background"><!-- 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>
<!-- /wp:group --></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 text + orange Smokey","categories":["quotes"],"patternName":"utkwds/quote-text-orange-smokey"},"align":"full","className":"utkwds-quote-text-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-color has-smokey-background-color has-text-color has-background has-link-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>
<!-- /wp:group --></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 text + orange white","categories":["quotes"],"patternName":"utkwds/quote-text-orange-white"},"align":"full","className":"utkwds-quote-text-orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","backgroundColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-background-color has-background"><!-- 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>
<!-- /wp:group --></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 text + orange texture light gray","categories":["quotes"],"patternName":"utkwds/quote-text-orange-texture-light-gray"},"align":"full","className":"utkwds-quote-text-orange is-style-orange-texture","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange is-style-orange-texture"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","backgroundColor":"light"} -->
<blockquote class="wp-block-quote utkwds-quote has-light-background-color has-background"><!-- 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>
<!-- /wp:group --></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 text + orange texture Smokey","categories":["quotes"],"patternName":"utkwds/quote-text-orange-texture-smokey"},"align":"full","className":"utkwds-quote-text-orange is-style-orange-texture","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange is-style-orange-texture"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-color has-smokey-background-color has-text-color has-background has-link-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>
<!-- /wp:group --></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 text + orange texture white","categories":["quotes"],"patternName":"utkwds/quote-text-orange-texture-white"},"align":"full","className":"utkwds-quote-text-orange is-style-orange-texture","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-quote-text-orange is-style-orange-texture"><!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:quote {"className":"utkwds-quote","backgroundColor":"white"} -->
<blockquote class="wp-block-quote utkwds-quote has-white-background-color has-background"><!-- 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>
<!-- /wp:group --></div>
<!-- /wp:group -->