Contact Card 2up

Contact Cards

A pattern used to display the name, organizational role, email address, phone number, and/or current photograph of members of a campus department.

How to use
Specifications

Use Cases:

Provide consistently formatted contact information for faculty, staff, and/or students in your department or unit.

Guidelines:

Contact cards may be appear in rows of two cards each as this pattern shows, or as just one card (see Contact Card – Single).
Can be used with or without images.

Avoid:

Using contact cards for content other than contact information.

Accessiblity:

Include descriptive alt text for images.

Dependencies:

In-text link

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: 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

Heading

Title

Phone

email@utk.edu

Lorem ipsum delor

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact 2up light gray","categories":["contact-cards"],"patternName":"utkwds/contact-2up-light-gray"},"className":"utkwds-contact-2up","layout":{"type":"constrained"}} -->
<div class="wp-block-group utkwds-contact-2up"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- 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:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- 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 {"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":"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 -->

<!-- wp:column -->
<div class="wp-block-column"><!-- 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">Lorem ipsum delor</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 -->

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

Heading

Title

Phone

email@utk.edu

Lorem ipsum delor

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact 2up Smokey","categories":["contact-cards"],"patternName":"utkwds/contact-2up-smokey"},"className":"utkwds-contact-2up","layout":{"type":"constrained"}} -->
<div class="wp-block-group utkwds-contact-2up"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- 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:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Contact single Smokey"},"className":"utkwds-contact-single","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group utkwds-contact-single has-white-color has-smokey-background-color has-text-color has-background has-link-color"><!-- 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":"white"} -->
<h3 class="wp-block-heading has-white-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":"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 -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"metadata":{"name":"Contact single Smokey"},"className":"utkwds-contact-single","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group utkwds-contact-single has-white-color has-smokey-background-color has-text-color has-background has-link-color"><!-- 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":"white"} -->
<h3 class="wp-block-heading has-white-color has-text-color">Lorem ipsum delor</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 -->

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

Heading

Title

Phone

email@utk.edu

Lorem ipsum delor

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact 2up white","categories":["contact-cards"],"patternName":"utkwds/contact-2up-white"},"align":"full","backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-background-color has-background"><!-- wp:group {"className":"utkwds-contact-2up","layout":{"type":"constrained"}} -->
<div class="wp-block-group utkwds-contact-2up"><!-- wp:heading -->
<h2 class="wp-block-heading">Heading</h2>
<!-- /wp:heading -->

<!-- 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:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- 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 -->

<!-- wp:column -->
<div class="wp-block-column"><!-- 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">Lorem ipsum delor</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 --></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

Heading

Title

Phone

email@utk.edu

Lorem ipsum delor

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact 2up white on Smokey","categories":["contact-cards"],"patternName":"utkwds/contact-2up-white-smokey"},"align":"full","backgroundColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-smokey-background-color has-background"><!-- wp:group {"className":"utkwds-contact-2up","layout":{"type":"constrained"}} -->
<div class="wp-block-group utkwds-contact-2up"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-white-color has-text-color has-link-color">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-white-color has-text-color has-link-color">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:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- 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 -->

<!-- wp:column -->
<div class="wp-block-column"><!-- 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">Lorem ipsum delor</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 --></div>
<!-- /wp:group -->