Media & text with CTA

Dynamic Content

A full width pattern designed to fill the hero or header area of a high-level or landing page. Contains an image or video, title, summary text, and call to action link. The large media may be aligned left or right, and has an offset orange background.

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

Accessiblity:

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 u0026amp; 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|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"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--60);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":64011,"sizeSlug":"large","linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image size-large is-style-utkwds-left-frame"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/06/gallery-2up-placeholder-large-1024x680.png" alt="" class="wp-image-64011"/></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 u0026amp; 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|60","right":"var:preset|spacing|60","bottom":"var:preset|spacing|60","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-media-text-cta" 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)"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":64011,"sizeSlug":"large","linkDestination":"none","className":"is-style-utkwds-left-frame"} -->
<figure class="wp-block-image size-large is-style-utkwds-left-frame"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/06/gallery-2up-placeholder-large-1024x680.png" alt="" class="wp-image-64011"/></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 -->