Text & Media + background banners

Banners

This pattern collects an image, text, and a single link. Choose from three grayscale background images that add texture and visual interest to this pattern. The background image in Variation A is an architectural feature from campus—an arch.

How to use
Specifications

Use Cases:

Highlight information on a single topic that requires a link or group of links.
Provide context for a group of links with a header, text, and a related image.
Text, image, and links should be related to the same topic. Use no more than one of these banners per page.

Guidelines:

This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.

Avoid:

Using this pattern as a hero or header
Using more than one of these banners on a webpage
Stacking (repeating one after the other)
Reversing, altering, or replacing background images

Accessiblity:

Include descriptive alt text for images.

Dependencies:

Single link

Image Dimensions:

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

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Heading

This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.

Single Link

<!-- wp:cover {"url":"https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/arch_texture_bg_2.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0},"contentPosition":"top center","isDark":false,"metadata":{"categories":["banners"],"patternName":"utkwds/text-media-bg-texture-a","name":"Text u0026amp; media + bg texture A"},"align":"full","className":"utkwds-text-media-bg-texture","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|60","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-top-center utkwds-text-media-bg-texture" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--60)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/arch_texture_bg_2.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-smokey-color has-text-color"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
<div class="wp-block-column"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"is-style-utkwds-single-link"} -->
<p class="is-style-utkwds-single-link"><a href="https://www.utk.edu/">Single Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":64146,"sizeSlug":"large","linkDestination":"none","className":"is-style-utkwds-right-frame"} -->
<figure class="wp-block-image size-large is-style-utkwds-right-frame"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/08/hero-testing-1024x917.jpg" alt="testing" class="wp-image-64146"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Heading

This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.

Single Link

<!-- wp:cover {"url":"https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/campus_aerial_sky_bg_1.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0},"contentPosition":"top center","isDark":false,"metadata":{"categories":["banners"],"patternName":"utkwds/text-media-bg-texture-b","name":"Text u0026amp; media + bg texture B"},"align":"full","className":"utkwds-text-media-bg-texture","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|60","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-top-center utkwds-text-media-bg-texture" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--60)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/campus_aerial_sky_bg_1.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-smokey-color has-text-color"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
<div class="wp-block-column"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"is-style-utkwds-single-link"} -->
<p class="is-style-utkwds-single-link"><a href="https://www.utk.edu/">Single Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-style-utkwds-right-frame"} -->
<figure class="wp-block-image size-large is-style-utkwds-right-frame"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/08/hero-testing-1024x917.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Heading

This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.

Single Link

<!-- wp:cover {"url":"https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/mtn_bg_1.jpg","dimRatio":0,"focalPoint":{"x":0.5,"y":0},"contentPosition":"top center","isDark":false,"metadata":{"categories":["banners"],"patternName":"utkwds/text-media-bg-texture-c","name":"Text u0026amp; media + bg texture C"},"align":"full","className":"utkwds-text-media-bg-texture","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","right":"var:preset|spacing|60","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|60"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-top-center utkwds-text-media-bg-texture" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--60)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/mtn_bg_1.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"textColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-smokey-color has-text-color"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
<div class="wp-block-column"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This pattern can be used to set important information apart from the rest of the page and collect links related to a single subject. Works well positioned above a footer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"is-style-utkwds-single-link"} -->
<p class="is-style-utkwds-single-link"><a href="https://www.utk.edu/">Single Link</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"sizeSlug":"large","linkDestination":"none","className":"is-style-utkwds-right-frame"} -->
<figure class="wp-block-image size-large is-style-utkwds-right-frame"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/08/hero-testing-1024x917.jpg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->