Contact Card

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 alone using this Single pattern or in rows of two cards each (see Contact Card – 2up).
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

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact single light gray","categories":["contact-cards"],"patternName":"utkwds/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 -->

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact single Smokey","categories":["contact-cards"],"patternName":"utkwds/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 -->

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact single white","categories":["contact-cards"],"patternName":"utkwds/contact-single-white-light-gray"},"align":"full","backgroundColor":"light","layout":{"type":"constrained","wideSize":""}} -->
<div class="wp-block-group alignfull has-light-background-color has-background"><!-- 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:group -->

Heading

Title

Phone

email@utk.edu

<!-- wp:group {"metadata":{"name":"Contact single white on Smokey","categories":["contact-cards"],"patternName":"utkwds/contact-single-white-smokey"},"align":"full","backgroundColor":"smokey","layout":{"type":"constrained","wideSize":""}} -->
<div class="wp-block-group alignfull has-smokey-background-color has-background"><!-- 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:group -->