Callout Banner

A full-width image featuring a floating text box.

How to use
Specifications

Use Cases:

Highlight a single, impactful statement
Call attention to a key statistic or a central piece of information
Break up long spans of text by adding visual interest to a page

Avoid:

Statements that wrap more than five lines of text
Statements exceeding 120 characters
Stacking (repeating one after the other)
Using more than two callout banners in a single page

Accessiblity:

Include descriptive alt text for the background image, and note it as a background image for those using screen readers.

Dependencies:

Image

Compatibility:

This component is supported by Safari 14.1, Chrome 84, Edge 84, Firefox 63, and later versions of these browsers.

Image Dimensions:

Recommended image dimensions: 1700w x 430h

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

<!-- wp:cover {"url":"https://images.utk.edu/wds/gallery-2up-placeholder-large.png","dimRatio":50,"contentPosition":"bottom right","isDark":false,"templateLock":"contentOnly","metadata":{"name":"Callout","categories":["banners"],"patternName":"utkwds/callout"},"align":"full","className":"utkwds-callout","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-right utkwds-callout" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"},"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"textColor":"white","fontSize":"small"} -->
<p class="has-text-align-left has-white-color has-text-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">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 --></div></div>
<!-- /wp:cover -->

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

<!-- wp:group {"metadata":{"name":"Callout + orange","categories":["banners"],"patternName":"utkwds/callout-orange"},"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://images.utk.edu/wds/gallery-2up-placeholder-large.png","dimRatio":50,"contentPosition":"bottom right","isDark":false,"templateLock":"contentOnly","align":"full","className":"utkwds-callout-orange","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-right utkwds-callout-orange" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"},"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"small"} -->
<p class="has-text-align-left has-white-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">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 --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"templateLock":"contentOnly","align":"full","className":"utkwds-orange-bar","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"backgroundColor":"orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-orange-bar has-orange-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"></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

<!-- wp:group {"metadata":{"name":"Callout + orange texture","categories":["banners"],"patternName":"utkwds/callout-orange-texture"},"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:cover {"url":"https://images.utk.edu/wds/gallery-2up-placeholder-large.png","dimRatio":50,"contentPosition":"bottom right","isDark":false,"templateLock":"contentOnly","align":"full","className":"utkwds-callout-orange","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-right utkwds-callout-orange" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--80);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"},"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","fontSize":"small"} -->
<p class="has-text-align-left has-white-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)">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 --></div></div>
<!-- /wp:cover -->

<!-- wp:group {"templateLock":"contentOnly","align":"full","className":"utkwds-orange-bar-texture","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"backgroundColor":"orange","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-orange-bar-texture has-orange-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->