Open
Description
<style>
.unlcms-center-xy {
left: 50%;
transform: translate(-50%, -50%);
}
.unlcms-bg-overlay-scarlet-gradient {
background-image: linear-gradient(57.7deg, rgba(157,0,0,.85),rgba(208,0,0,.9));
}
.unlcms-bf-blur-3 {
backdrop-filter: blur(3px);
}
.unlcms-bg-gradient-darker-grays {
background-image: linear-gradient(57.7deg, #292928, #393937);
}
.unlcms-bg-scrim-bottom::after {
background-image: linear-gradient(rgba(36,36,35,0),rgba(36,36,35,.95));
bottom: 0;
content: '';
height: 300%;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
</style>
<script>
window.addEventListener('inlineJSReady', function() {
WDN.initializePlugin('card-as-link');
});
</script>
<div class="dcf-bleed">
<div class="dcf-relative">
<h2 class="dcf-absolute dcf-pin-top dcf-z-1 dcf-d-inline-block dcf-mb-0 dcf-pt-2 dcf-pb-2 dcf-pr-4 dcf-pl-4 dcf-txt-center dcf-txt-h5 unl-cream unlcms-bg-overlay-scarlet-gradient unlcms-bf-blur-3 unlcms-center-xy">Connect with <a class="dcf-txt-decor-hover unl-cream" href="#">@Lorem_Ipsum</a></h2>
</div>
<ul class="dcf-list-bare dcf-grid-halves@sm dcf-grid-fourths@lg">
<!-- Instagram - user with link -->
<li class="dcf-card-as-link dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<figure class="dcf-ratio-child unlcms-scrim-bottom">
<picture>
<source
data-sizes=""
data-srcset="
wdn/templates_5.3/images/dev/150821-tunnel-325-sm-min.jpg 284w,
wdn/templates_5.3/images/dev/150821-tunnel-325-md-min.jpg 505w,
wdn/templates_5.3/images/dev/150821-tunnel-325-lg-min.jpg 898w,
wdn/templates_5.3/images/dev/150821-tunnel-325-xl-min.jpg 1596w"
srcset="data:,1w"
type="image/jpeg">
<img
class="dcf-obj-fit-cover dcf-lazy-load"
height="300"
width="300"
data-src="wdn/templates_5.3/images/dev/150821-tunnel-325-sm-min.jpg"
src="data:,"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="New students flow onto the field of Memorial Stadium during the annual Tunnel Walk.">
</picture>
<noscript>
<img
class="dcf-obj-fit-cover"
height="300"
width="300"
src="wdn/templates_5.3/images/dev/150821-tunnel-325-sm-min.jpg"
alt="New students flow onto the field of Memorial Stadium during the annual Tunnel Walk.">
</noscript>
<figcaption class="dcf-absolute dcf-pin-bottom dcf-pin-left dcf-w-100% dcf-d-flex dcf-ai-center dcf-pt-2 dcf-pb-2 dcf-pl-3 dcf-pr-3 dcf-txt-xs dcf-z-1 unl-cream unlcms-bg-scrim-bottom">
<svg class="dcf-h-5 dcf-w-5 dcf-mr-2 dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48" aria-hidden="true">
<path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
</svg>
<a class="dcf-card-link dcf-txt-decor-hover unl-cream" href="#"><span class="dcf-sr-only">Photo by Instagram user </span><cite class="dcf-roman">user--with-link</cite></a>
</figcaption>
</figure>
</li>
<!-- Instagram - user without link -->
<li class="dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<figure class="dcf-ratio-child unlcms-scrim-bottom">
<picture>
<source
data-sizes=""
data-srcset="
wdn/templates_5.3/images/dev/150815-commencement-324-sm-min.jpg 284w,
wdn/templates_5.3/images/dev/150815-commencement-324-md-min.jpg 505w,
wdn/templates_5.3/images/dev/150815-commencement-324-lg-min.jpg 898w,
wdn/templates_5.3/images/dev/150815-commencement-324-xl-min.jpg 1596w"
srcset="data:,1w"
type="image/jpeg">
<img
class="dcf-obj-fit-cover dcf-lazy-load"
height="300"
width="300"
data-src="wdn/templates_5.3/images/dev/150815-commencement-324-sm-min.jpg"
src="data:,"
loading="lazy"
decoding="async"
fetchpriority="low"
alt="Nilmar Robledo Caicedo from Colombia shakes hands after receiving his masters degree in agricultural economics.">
</picture>
<noscript>
<img
class="dcf-obj-fit-cover"
height="300"
width="300"
src="wdn/templates_5.3/images/dev/150815-commencement-324-sm-min.jpg"
alt="Nilmar Robledo Caicedo from Colombia shakes hands after receiving his masters degree in agricultural economics.">
</noscript>
<figcaption class="dcf-absolute dcf-pin-bottom dcf-pin-left dcf-w-100% dcf-d-flex dcf-ai-center dcf-pt-2 dcf-pb-2 dcf-pl-3 dcf-pr-3 dcf-txt-xs dcf-z-1 unl-cream unlcms-bg-scrim-bottom">
<svg class="dcf-h-5 dcf-w-5 dcf-mr-2 dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48" aria-hidden="true">
<path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
</svg>
<span class="dcf-sr-only">Photo by Instagram user </span><cite class="dcf-roman">user--without-link</cite>
</figcaption>
</figure>
</li>
<!-- Tweet with link -->
<li class="dcf-card-as-link dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
<div class="dcf-h-100% dcf-d-flex dcf-ai-center dcf-jc-center dcf-p-6">
<blockquote class="dcf-w-max-sm dcf-d-flex dcf-flex-col dcf-ai-center dcf-m-0">
<p class="dcf-txt-sm dcf-txt-center unl-cream">Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<footer class="dcf-d-flex dcf-ai-center dcf-txt-xs unl-cream">
<svg class="dcf-h-5 dcf-w-5 dcf-mr-2 dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48" aria-hidden="true">
<path d="M15.1 43.5c18.11 0 28-15 28-28v-1.27A20 20 0 0 0 48 9.11a19.66 19.66 0 0 1-5.66 1.55 9.88 9.88 0 0 0 4.33-5.45 19.74 19.74 0 0 1-6.25 2.39 9.86 9.86 0 0 0-16.78 9A28 28 0 0 1 3.34 6.3a9.86 9.86 0 0 0 3 13.15 9.77 9.77 0 0 1-4.47-1.23v.12A9.85 9.85 0 0 0 9.82 28a9.83 9.83 0 0 1-4.45.17 9.86 9.86 0 0 0 9.2 6.83 19.76 19.76 0 0 1-12.23 4.22A20 20 0 0 1 0 39.08a27.88 27.88 0 0 0 15.1 4.42"></path>
</svg>
<a class="dcf-card-link dcf-txt-decor-hover unl-cream" href="#"><span class="dcf-sr-only">Tweet by user </span>user--with-link</a>
</footer>
</blockquote>
</div>
</div>
</li>
<!-- Tweet without link -->
<li class="dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
<div class="dcf-h-100% dcf-d-flex dcf-ai-center dcf-jc-center dcf-p-6">
<blockquote class="dcf-w-max-sm dcf-d-flex dcf-flex-col dcf-ai-center dcf-m-0">
<p class="dcf-txt-sm dcf-txt-center unl-cream">Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur.</p>
<footer class="dcf-d-flex dcf-ai-center dcf-txt-xs unl-cream">
<svg class="dcf-h-5 dcf-w-5 dcf-mr-2 dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48" aria-hidden="true">
<path d="M15.1 43.5c18.11 0 28-15 28-28v-1.27A20 20 0 0 0 48 9.11a19.66 19.66 0 0 1-5.66 1.55 9.88 9.88 0 0 0 4.33-5.45 19.74 19.74 0 0 1-6.25 2.39 9.86 9.86 0 0 0-16.78 9A28 28 0 0 1 3.34 6.3a9.86 9.86 0 0 0 3 13.15 9.77 9.77 0 0 1-4.47-1.23v.12A9.85 9.85 0 0 0 9.82 28a9.83 9.83 0 0 1-4.45.17 9.86 9.86 0 0 0 9.2 6.83 19.76 19.76 0 0 1-12.23 4.22A20 20 0 0 1 0 39.08a27.88 27.88 0 0 0 15.1 4.42"></path>
</svg>
<span class="unl-cream"><span class="dcf-sr-only">Tweet by user </span>user--without-link</span>
</footer>
</blockquote>
</div>
</div>
</li>
<!-- CTA with inline SVG icon -->
<li class="dcf-card-as-link dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
<div class="dcf-h-100% dcf-d-flex dcf-flex-col dcf-ai-center dcf-jc-center dcf-gap-5 dcf-p-6">
<div class="unl-cream">
<svg class="dcf-d-block dcf-h-7 dcf-w-7 dcf-fill-current" width="24" height="24" viewBox="0 0 24 24"><path d="M18 9h-4.17l-1.37-3.197c-.158-.368-.762-.368-.92 0L10.17 9H6a.5.5 0 0 0-.354.854l3.289 3.289-1.414 4.714a.502.502 0 0 0 .192.554.501.501 0 0 0 .587-.011l3.7-2.775 3.7 2.775a.496.496 0 0 0 .586.011.5.5 0 0 0 .192-.554l-1.414-4.714 3.289-3.289a.498.498 0 0 0 .108-.544A.497.497 0 0 0 18 9zm-3.854 3.646a.497.497 0 0 0-.125.497l1.063 3.545L12.3 14.6a.496.496 0 0 0-.6 0l-2.785 2.088 1.063-3.545a.497.497 0 0 0-.125-.497L7.207 10H10.5a.5.5 0 0 0 .46-.303L12 7.27l1.04 2.427a.5.5 0 0 0 .46.303h3.293l-2.647 2.646z"/><path d="M24 12c0-.9-.481-1.705-1.219-2.145a2.498 2.498 0 0 0-1.64-3.963 2.499 2.499 0 0 0-.655-2.378 2.5 2.5 0 0 0-2.378-.654 2.5 2.5 0 0 0-3.963-1.641A2.5 2.5 0 0 0 12 0a2.5 2.5 0 0 0-2.145 1.219A2.495 2.495 0 0 0 5.893 2.86a2.501 2.501 0 0 0-2.378.655 2.495 2.495 0 0 0-.656 2.378 2.496 2.496 0 0 0-1.64 3.962 2.496 2.496 0 0 0 0 4.29 2.5 2.5 0 0 0-.306 2.448 2.501 2.501 0 0 0 1.947 1.515 2.499 2.499 0 0 0 .654 2.379 2.505 2.505 0 0 0 2.379.653 2.498 2.498 0 0 0 3.963 1.641 2.496 2.496 0 0 0 4.289 0 2.497 2.497 0 0 0 3.963-1.641 2.495 2.495 0 0 0 3.032-3.032 2.498 2.498 0 0 0 1.641-3.963A2.496 2.496 0 0 0 24 12zm-2.224 1.471a.502.502 0 0 0-.181.911 1.495 1.495 0 0 1-1.126 2.719.501.501 0 0 0-.516.773 1.496 1.496 0 0 1-2.08 2.08.501.501 0 0 0-.773.516 1.497 1.497 0 0 1-2.719 1.126.49.49 0 0 0-.517-.217.5.5 0 0 0-.394.398C13.339 22.486 12.721 23 12 23s-1.339-.514-1.472-1.224a.497.497 0 0 0-.492-.408.5.5 0 0 0-.419.227 1.497 1.497 0 0 1-2.718-1.126.498.498 0 0 0-.212-.519.498.498 0 0 0-.56.002 1.496 1.496 0 0 1-2.081-2.079.501.501 0 0 0-.516-.773 1.5 1.5 0 0 1-1.694-.892 1.5 1.5 0 0 1 .567-1.828.5.5 0 0 0-.18-.911 1.494 1.494 0 0 1 .001-2.94.5.5 0 0 0 .18-.91A1.496 1.496 0 0 1 3.53 6.9a.499.499 0 0 0 .517-.772 1.496 1.496 0 0 1 2.08-2.082.5.5 0 0 0 .773-.516 1.495 1.495 0 0 1 2.718-1.125.5.5 0 0 0 .911-.181 1.497 1.497 0 0 1 2.943 0 .5.5 0 0 0 .394.399.49.49 0 0 0 .517-.218 1.497 1.497 0 0 1 2.719 1.126.502.502 0 0 0 .773.516 1.497 1.497 0 0 1 2.08 2.081.501.501 0 0 0 .516.772 1.493 1.493 0 0 1 1.694.89 1.501 1.501 0 0 1-.568 1.829.5.5 0 0 0 .181.91 1.497 1.497 0 0 1-.002 2.942z"/><path fill="none" d="M0 0h24v24H0z"/></svg>
</div>
<span class="dcf-txt-h4 dcf-bold dcf-txt-center dcf-lh-2 unl-ls-h unl-cream">Vivamus Sagittis Lacus Vel Augue Laoreet Rutrum</span>
<a class="dcf-btn dcf-btn-primary dcf-card-link" href="#">Call to Action</a>
</div>
</div>
</li>
<!-- placeholder blocks to complete the grid -->
<li class="dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
</div>
</li>
<li class="dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
</div>
</li>
<li class="dcf-ratio dcf-ratio-1x1 dcf-mb-0 unlcms-bg-gradient-darker-grays">
<div class="dcf-ratio-child">
</div>
</li>
</ul>
</div>