Contact Card Banner

Banners

A full-width content pattern combining a block of text and a call-to-action (CTA) link with an inset contact card, on a Smokey background.

How to use
Specifications

Use Cases:

Collect important information along with links and a departmental point-of-contact
End a long section of a page or supplement content by providing users with multiple ways to access more information

Avoid:

Using this pattern as the first item on a web page (as a hero or header).
Using without links and/or contact information
Stacking (repeating one after the other)
Using more than one contact card banner per page
Using this pattern as the last item on a web page (i.e. just before the footer)

Accessiblity:

Include descriptive alt text for images

Dependencies:

Contact card
CTA link
Image

Image Dimensions:

Recommended image dimensions: 310w x 310h (square or portrait)

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Heading

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

CTA Link

Contact us for help

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Text u0026amp; contact light gray","categories":["banners"],"patternName":"utkwds/text-contact-light-gray"},"align":"full","className":"utkwds-text-contact","style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","bottom":"var:preset|spacing|x-large","right":"var:preset|spacing|x-large","left":"var:preset|spacing|x-large"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-contact has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--x-large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--x-large)"><!-- wp:heading {"align":"wide"} -->
<h2 class="wp-block-heading alignwide">Heading</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph -->
<p>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 -->

<!-- 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 {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph -->
<p><strong>Contact us for help</strong></p>
<!-- /wp:paragraph -->

<!-- wp:group {"metadata":{"name":"Contact single white"},"className":"utkwds-contact-single","backgroundColor":"white","textColor":"smokey","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group utkwds-contact-single has-smokey-color has-white-background-color has-text-color has-background"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2023/06/istockphoto-1223671392-170667a.jpeg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"textColor":"smokey"} -->
<h3 class="wp-block-heading has-smokey-color has-text-color">Heading</h3>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-utkwds-orange-separator"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-utkwds-orange-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"fontSize":"x-small"} -->
<p class="has-x-small-font-size">Title</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"x-small"} -->
<p class="has-x-small-font-size">Phone</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"utkwds-cta-link","fontSize":"x-small"} -->
<p class="utkwds-cta-link has-x-small-font-size"><a href="mailto:email@utk.edu">email@utk.edu</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

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

CTA Link

Contact us for help

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Text u0026amp; contact Smokey","categories":["banners"],"patternName":"utkwds/text-contact-smokey"},"align":"full","className":"utkwds-text-contact","style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","bottom":"var:preset|spacing|x-large","right":"var:preset|spacing|x-large","left":"var:preset|spacing|x-large"}}},"backgroundColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-contact has-smokey-background-color has-background" style="padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--x-large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--x-large)"><!-- wp:heading {"align":"wide","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading alignwide has-white-color has-text-color has-link-color">Heading</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"blockGap":"var:preset|spacing|small"}},"textColor":"white"} -->
<div class="wp-block-column has-white-color has-text-color has-link-color" style="flex-basis:60%"><!-- wp:paragraph -->
<p>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 -->

<!-- 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 {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-white-color has-text-color has-link-color"><strong>Contact us for help</strong></p>
<!-- /wp:paragraph -->

<!-- wp:group {"metadata":{"name":"Contact single white"},"className":"utkwds-contact-single","backgroundColor":"white","textColor":"smokey","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group utkwds-contact-single has-smokey-color has-white-background-color has-text-color has-background"><!-- wp:image {"id":63268,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://wds-dev.utk.edu/wp-content/uploads/2023/06/istockphoto-1223671392-170667a.jpeg" alt="" class="wp-image-63268"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3,"textColor":"smokey"} -->
<h3 class="wp-block-heading has-smokey-color has-text-color">Heading</h3>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-utkwds-orange-separator"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-utkwds-orange-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"fontSize":"x-small"} -->
<p class="has-x-small-font-size">Title</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"x-small"} -->
<p class="has-x-small-font-size">Phone</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"utkwds-cta-link","fontSize":"x-small"} -->
<p class="utkwds-cta-link has-x-small-font-size"><a href="mailto:email@utk.edu">email@utk.edu</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

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

CTA Link

Contact us for help

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Text u0026amp; contact white","categories":["banners"],"patternName":"utkwds/text-contact-white"},"align":"full","className":"utkwds-text-contact","style":{"spacing":{"padding":{"top":"var:preset|spacing|x-large","bottom":"var:preset|spacing|x-large","right":"var:preset|spacing|x-large","left":"var:preset|spacing|x-large"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-text-contact" style="padding-top:var(--wp--preset--spacing--x-large);padding-right:var(--wp--preset--spacing--x-large);padding-bottom:var(--wp--preset--spacing--x-large);padding-left:var(--wp--preset--spacing--x-large)"><!-- wp:heading {"align":"wide"} -->
<h2 class="wp-block-heading alignwide">Heading</h2>
<!-- /wp:heading -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%","style":{"spacing":{"blockGap":"var:preset|spacing|small"}}} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph -->
<p>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 -->

<!-- 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 {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph -->
<p><strong>Contact us for help</strong></p>
<!-- /wp:paragraph -->

<!-- wp:group {"metadata":{"name":"Contact single light gray"},"className":"utkwds-contact-single","backgroundColor":"light","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group utkwds-contact-single has-light-background-color has-background"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2023/06/istockphoto-1223671392-170667a.jpeg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Heading</h3>
<!-- /wp:heading -->

<!-- wp:separator {"className":"is-style-utkwds-orange-separator"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-utkwds-orange-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Title</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Phone</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"utkwds-cta-link","fontSize":"small"} -->
<p class="utkwds-cta-link has-small-font-size"><a href="mailto:email@utk.edu">email@utk.edu</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->