Media & text with CTA

Banners Heroes

A full width pattern designed to fill the hero or header area of a high-level or landing page. Contains an image, title, summary text, and call to action link. Media may be aligned left or right, and has an offset orange background. Some pattern variations are optimized for YouTube video embeds.

How to use
Specifications

Use Cases:

Introduce users to the main subject of a page
Orient or introduce users to the information on your page
Make users aware of your goal for them through a clear call-to-action (CTA), the most important link on the page
Surface important information above the fold of the page

Guidelines:

The Media & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

Avoid:

Stacking (repeating one after the other)
Not including a hero pattern at the top of a high-level or landing page

Accessibility:

Include descriptive alt text for images.

Dependencies:

CTA 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

The Media & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Media \u0026 text with CTA light gray","categories":["hero"],"patternName":"utkwds/media-text-cta-light-gray"},"align":"full","className":"utkwds-media-text-cta","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-media-text-cta has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image is-style-utkwds-left-frame"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- 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>The Media & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

Heading

The Media & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Media \u0026 text with CTA white","categories":["hero"],"patternName":"utkwds/media-text-cta-white"},"align":"full","className":"utkwds-media-text-cta","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-media-text-cta" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image is-style-utkwds-left-frame"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- 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>The Media & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

Heading

The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Text with CTA \u0026 media light gray","categories":["hero"],"patternName":"utkwds/text-cta-media-light-gray"},"align":"full","className":"utkwds-text-cta-media","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-cta-media has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- 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>The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image is-style-utkwds-left-frame"><img src="https://sandbox-dev.utk.edu/leigh/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Text with CTA \u0026 media white","categories":["hero"],"patternName":"utkwds/text-cta-media-white"},"align":"full","className":"utkwds-text-cta-media","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-cta-media" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- 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>The Text with CTA & media pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image is-style-utkwds-left-frame"><img src="https://sandbox-dev.utk.edu/leigh/wp-content/themes/utkwds/assets/images/image-placeholder-large.png" alt="image placeholder"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

The Video & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Video \u0026 text with CTA light gray","categories":["hero"],"patternName":"utkwds/vido-text-cta-light-gray"},"align":"full","className":"utkwds-media-text-cta","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-media-text-cta has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"providerNameSlug":"youtube","responsive":true,"className":"is-style-utkwds-left-frame wp-embed-aspect-16-9 wp-has-aspect-ratio"} /--></div>
<!-- /wp:column -->

<!-- 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>The Video & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

Heading

The Video & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Video \u0026 text with CTA white","categories":["hero"],"patternName":"utkwds/video-text-cta-white"},"align":"full","className":"utkwds-media-text-cta","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-media-text-cta" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"providerNameSlug":"youtube","responsive":true,"className":"is-style-utkwds-left-frame wp-embed-aspect-16-9 wp-has-aspect-ratio"} /--></div>
<!-- /wp:column -->

<!-- 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>The Video & Text with CTA pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

Heading

The Text with CTA & video pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Text with CTA \u0026 video light gray","categories":["hero"],"patternName":"utkwds/text-cta-video-light-gray"},"align":"full","className":"utkwds-text-cta-media","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-cta-media has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- 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>The Text with CTA & video pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"providerNameSlug":"youtube","responsive":true,"className":"is-style-utkwds-right-frame wp-embed-aspect-16-9 wp-has-aspect-ratio"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

The Text with CTA & video pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.

CTA Link

<!-- wp:group {"metadata":{"name":"Text with CTA \u0026 video white","categories":["hero"],"patternName":"utkwds/text-cta-video-white"},"align":"full","className":"utkwds-text-cta-media","style":{"spacing":{"padding":{"top":"var:preset|spacing|small","right":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-cta-media" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- 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>The Text with CTA & video pattern is designed to fill the hero area of a high-level landing page, to orient users to what your page is about.</p>
<!-- /wp:paragraph -->

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

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:embed {"providerNameSlug":"youtube","responsive":true,"className":"is-style-utkwds-right-frame wp-embed-aspect-16-9 wp-has-aspect-ratio"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->