Media & Text Banner

Banners

A full width half-and-half (50/50) pattern split equally between image or media and text. Bordered on top with a thin orange line. Options for text formatting include: heading, paragraph, lists, and links.

How to use
Specifications

Use Cases:

Highlight or spotlight important information on a single topic so that it stands apart from the body of the page
Text should be succinct and to the point
Link text should provide important context for users
Images should relate to text

Guidelines:

This pattern can be used to set important information apart from the rest of the page and/or collect links related to a single subject.

Avoid:

Using this pattern as a hero or header
Stacking (repeating one after the other)

Accessiblity:

Include descriptive alt text for images

Dependencies:

Single link
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: 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/or collect links related to a single subject.

Single Link

<!-- wp:media-text {"align":"","mediaType":"image","metadata":{"name":"Media u0026 text light gray","categories":["banners"],"patternName":"utkwds/media-text-light-gray"},"className":"utkwds-media-text","backgroundColor":"light"} -->
<div class="wp-block-media-text is-stacked-on-mobile utkwds-media-text has-light-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure><div class="wp-block-media-text__content"><!-- 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/or collect links related to a single subject.</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></div>
<!-- /wp:media-text -->

Heading

This pattern can be used to set important information apart from the rest of the page and/or collect links related to a single subject.

Single Link

<!-- wp:media-text {"align":"","mediaType":"image","metadata":{"name":"Media u0026 text Smokey","categories":["banners"],"patternName":"utkwds/media-text-smokey"},"className":"utkwds-media-text is-style-smokey","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<div class="wp-block-media-text is-stacked-on-mobile utkwds-media-text is-style-smokey has-white-color has-smokey-background-color has-text-color has-background has-link-color"><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"textColor":"white"} -->
<h2 class="wp-block-heading has-white-color has-text-color">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This pattern can be used to set important information apart from the rest of the page and/or collect links related to a single subject.</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></div>
<!-- /wp:media-text -->

Heading

This pattern can be used to set important information apart from the rest of the page and/or collect links related to a single subject.

Single Link

<!-- wp:media-text {"align":"","mediaType":"image","metadata":{"name":"Media u0026 text white","categories":["banners"],"patternName":"utkwds/media-text-white"},"className":"utkwds-media-text","backgroundColor":"white"} -->
<div class="wp-block-media-text is-stacked-on-mobile utkwds-media-text has-white-background-color has-background"><figure class="wp-block-media-text__media"><img src="https://images.utk.edu/wds/gallery-2up-placeholder-large.png" alt=""/></figure><div class="wp-block-media-text__content"><!-- 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/or collect links related to a single subject.</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></div>
<!-- /wp:media-text -->