Image & Subject Link Card 2up

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 3up).
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: 460w x 310h (aspect ratio 3:2)

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Heading

Heading

<!-- wp:group {"metadata":{"name":"Subject 2up light gray"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns {"className":"utkwds-subject-2up"} -->
<div class="wp-block-columns utkwds-subject-2up"><!-- 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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

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

Heading

Heading

<!-- wp:group {"metadata":{"name":"Subject 2up Smokey"},"align":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"className":"utkwds-subject-2up"} -->
<div class="wp-block-columns utkwds-subject-2up"><!-- 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|60"},"blockGap":"var:preset|spacing|60"},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|40","bottom":"0","left":"var:preset|spacing|40"}},"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--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)">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|60"},"blockGap":"var:preset|spacing|60"},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"top":"0","right":"var:preset|spacing|40","bottom":"0","left":"var:preset|spacing|40"}},"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--40);padding-bottom:0;padding-left:var(--wp--preset--spacing--40)">Heading</h2>
<!-- /wp:heading --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Heading

Heading

<!-- wp:group {"metadata":{"name":"Subject 2up 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-2up"} -->
<div class="wp-block-columns utkwds-subject-2up"><!-- 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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

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

Heading

Heading

<!-- wp:group {"metadata":{"name":"Subject 2up white on 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-2up"} -->
<div class="wp-block-columns utkwds-subject-2up"><!-- 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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<h2 class="wp-block-heading has-text-align-center" style="padding-right:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">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|60","padding":{"bottom":"var:preset|spacing|60"}}},"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--60)"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://wds-dev.utk.edu/wp-content/uploads/2024/05/435906_20230728_Robot_Dog_023-scaled.jpg" alt=""/></figure>
<!-- /wp:image -->

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