Image & Subject Link Card 3up

Content Cards

A linked card component consisting of an image and a single line of text. The image and text both function as links, and there is a subtle hover effect on the image.

How to use
Specifications

Use Cases:

Use this card pattern to create a gallery-style grid or list of links and images.

Guidelines:

Image & Subject Link cards are intended to be used in rows of two or three individual cards (See Image & Subject Link Card 2up).
Multiple rows of cards may be used on a single page.

Avoid:

Using with more than a few descriptive words
Wrapping text to a second line, if possible

Accessiblity:

Include descriptive alt text for images.

Dependencies:

Image

Image Dimensions:

Recommended image dimensions: 720 x 540 or 960 x 720 (most flexible)

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Heading

<!-- wp:columns {"metadata":{"name":"Subject 3up light gray","categories":["content-cards"],"patternName":"utkwds/subject-3up-light-gray"},"className":"utkwds-subject-3up"} -->
<div class="wp-block-columns utkwds-subject-3up"><!-- wp:column {"backgroundColor":"light"} -->
<div class="wp-block-column has-light-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-light-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"light"} -->
<div class="wp-block-column has-light-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-light-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"light"} -->
<div class="wp-block-column has-light-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"light","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-light-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Heading

<!-- wp:columns {"metadata":{"name":"Subject 3up Smokey","categories":["content-cards"],"patternName":"utkwds/subject-3up-smokey"},"className":"utkwds-subject-3up"} -->
<div class="wp-block-columns utkwds-subject-3up"><!-- wp:column {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<div class="wp-block-column has-white-color has-smokey-background-color has-text-color has-background has-link-color"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|small"},"blockGap":"var:preset|spacing|small"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-color has-smokey-background-color has-text-color has-background has-link-color" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|x-small","bottom":"0","left":"var:preset|spacing|x-small"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color has-link-color" style="padding-top:0;padding-right:var(--wp--preset--spacing--x-small);padding-bottom:0;padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<div class="wp-block-column has-white-color has-smokey-background-color has-text-color has-background has-link-color"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|small"},"blockGap":"var:preset|spacing|small"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-color has-smokey-background-color has-text-color has-background has-link-color" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|x-small","bottom":"0","left":"var:preset|spacing|x-small"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color has-link-color" style="padding-top:0;padding-right:var(--wp--preset--spacing--x-small);padding-bottom:0;padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white"} -->
<div class="wp-block-column has-white-color has-smokey-background-color has-text-color has-background has-link-color"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|small"},"blockGap":"var:preset|spacing|small"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-color has-smokey-background-color has-text-color has-background has-link-color" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|x-small","bottom":"0","left":"var:preset|spacing|x-small"}},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color has-link-color" style="padding-top:0;padding-right:var(--wp--preset--spacing--x-small);padding-bottom:0;padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Heading

<!-- wp:group {"metadata":{"name":"Subject 3up white","categories":["content-cards"],"patternName":"utkwds/subject-3up-white"},"align":"full","backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-background-color has-background"><!-- wp:columns {"className":"utkwds-subject-3up"} -->
<div class="wp-block-columns utkwds-subject-3up"><!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

<!-- wp:group {"metadata":{"name":"Subject 3up white on Smokey","categories":["content-cards"],"patternName":"utkwds/subject-3up-white-smokey"},"align":"full","backgroundColor":"smokey","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-smokey-background-color has-background"><!-- wp:columns {"className":"utkwds-subject-3up"} -->
<div class="wp-block-columns utkwds-subject-3up"><!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background"><!-- wp:group {"templateLock":"contentOnly","className":"utkwds-subject","style":{"spacing":{"blockGap":"var:preset|spacing|small","padding":{"bottom":"var:preset|spacing|small"}}},"backgroundColor":"white","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group utkwds-subject has-white-background-color has-background" style="padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:image -->
<figure class="wp-block-image"><img src="https://wds-dev.utk.edu/wp-content/themes/utkwds/assets/images/image-placeholder-small.png" alt="image placeholder"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|x-small","left":"var:preset|spacing|x-small"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--x-small);padding-left:var(--wp--preset--spacing--x-small)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->