<div class="c-quick-links-card js-gsap-scale-in">
<a class="o-link c-quick-links-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Card Title">
</a>
<style>
.o-background-image--quick-links-card-01 {
background-image: url("https://picsum.photos/480/270");
}
@media(min-width: 480px) {
.o-background-image--quick-links-card-01 {
background-image: url("https://picsum.photos/768/432");
}
}
</style>
<div class="o-background-image c-quick-links-card__background o-background-image--quick-links-card-01"></div>
<div class="c-quick-links-card__content">
<div class="c-quick-links-card__body">
<span class="o-icon o-icon--xl c-quick-links-card__icon">
<svg width="48" height="48" viewBox="0 0 48 48" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0862 8.57021C11.7434 8.92088 10.4348 9.18603 9.19458 9.33143C7.92872 9.47684 6.72274 9.48539 5.58518 9.32288C5.66215 10.2381 6.06415 11.0592 6.67142 11.6664C7.35567 12.3507 8.29651 12.7698 9.33999 12.7698C10.3835 12.7698 11.3243 12.3507 12.0086 11.6664C12.6842 10.9822 13.1119 10.0413 13.1119 8.99786C13.1119 8.85246 13.1119 8.70706 13.0862 8.57021ZM24.7356 7.07341H39.3614V9.12616H24.7356V7.07341ZM45.8275 4.07128H48V2.01853H33.0748V0H31.0221V2.01853H16.0969V4.07128H18.2694V13.933H20.3222V4.07128H43.7748V25.2915H20.3222V23.7006H18.2694V27.3443H31.0221V29.2345C30.603 29.3885 30.2181 29.6279 29.9102 29.9444C29.3628 30.4918 29.0207 31.253 29.0207 32.0827C29.0207 32.9123 29.3628 33.6821 29.9102 34.2295C30.4576 34.7769 31.2188 35.119 32.057 35.119C32.8952 35.119 33.6565 34.7769 34.2038 34.2295C34.7513 33.6821 35.0934 32.9209 35.0934 32.0827C35.0934 31.2445 34.7513 30.4918 34.2038 29.9359C33.8874 29.6194 33.5111 29.3713 33.0834 29.2259V27.3443H45.8361V4.07128H45.8275ZM32.7413 31.3899C32.9123 31.5609 33.0235 31.809 33.0235 32.0827C33.0235 32.3564 32.9123 32.5959 32.7327 32.7755C32.5531 32.9551 32.3051 33.0663 32.0399 33.0663C31.7748 33.0663 31.5182 32.9551 31.3471 32.784C31.1675 32.6044 31.0563 32.3564 31.0563 32.0827C31.0563 31.809 31.1675 31.5609 31.3386 31.3899C31.5096 31.2103 31.7577 31.0991 32.0314 31.0991C32.3051 31.0991 32.5445 31.2103 32.7242 31.3899H32.7413ZM31.4754 19.2958H39.3614V21.3485H31.4754V19.2958ZM31.4754 15.2673H39.3614V17.32H31.4754V15.2673ZM24.7356 11.1105H39.3614V13.1632H24.7356V11.1105ZM9.33999 22.7769C8.77548 22.7769 8.31361 23.2388 8.31361 23.8033C8.31361 24.3678 8.77548 24.8297 9.33999 24.8297C9.90449 24.8297 10.3664 24.3678 10.3664 23.8033C10.3664 23.2388 9.90449 22.7769 9.33999 22.7769ZM9.33999 26.3093C8.77548 26.3093 8.31361 26.7712 8.31361 27.3357C8.31361 27.9002 8.77548 28.3621 9.33999 28.3621C9.90449 28.3621 10.3664 27.9002 10.3664 27.3357C10.3664 26.7712 9.90449 26.3093 9.33999 26.3093ZM12.3079 17.8076H25.779V20.0399H13.8047V21.0663L13.8218 45.9387H10.3664V33.8874C10.3664 33.3229 9.90449 32.861 9.33999 32.861C8.77548 32.861 8.31361 33.3229 8.31361 33.8874V45.9387H4.85816V30.4918H2.05274V22.5716C2.05274 21.2545 2.56593 20.057 3.37847 19.1932C4.15681 18.3806 5.20884 17.8589 6.37206 17.8161L8.61297 20.057L9.33999 20.784L10.067 20.057L12.3079 17.8161V17.8076ZM26.8054 15.7548H27.8318V22.0927H15.8489L15.866 46.9651V47.9914H14.8396H2.80542V32.5445H0V22.5716C0 20.7156 0.727014 19.0135 1.89879 17.7819C3.07912 16.5331 4.71276 15.7634 6.51746 15.7634H7.21882L7.51818 16.0627L9.33999 17.8845L11.1618 16.0627L11.4612 15.7634H26.814L26.8054 15.7548ZM5.97006 7.3129C6.8938 7.43264 7.90306 7.41554 8.9722 7.29579C10.0328 7.17605 11.1447 6.95367 12.2994 6.66287C12.2053 6.55167 12.1112 6.44048 12.0086 6.33785C11.3329 5.6536 10.3835 5.2345 9.33999 5.2345C8.29651 5.2345 7.35567 5.6536 6.67142 6.33785C6.38917 6.6201 6.14968 6.94512 5.97006 7.3129ZM9.33999 3.18175C10.9394 3.18175 12.3934 3.83179 13.454 4.88382C14.5061 5.93585 15.1561 7.38988 15.1561 8.99786C15.1561 10.6058 14.5061 12.0513 13.454 13.1119C12.402 14.1639 10.948 14.814 9.33999 14.814C7.732 14.814 6.27798 14.1639 5.22594 13.1119C4.17391 12.0513 3.51532 10.5973 3.51532 8.99786C3.51532 7.39843 4.16536 5.93585 5.22594 4.88382C6.27798 3.83179 7.732 3.1732 9.33999 3.1732V3.18175Z" />
</svg>
</span>
<h3 class="o-heading o-heading--sm c-quick-links-card__heading">
Card Title
</h3>
<div class="o-dek c-quick-links-card__dek">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.
</div>
</div>
<a class="o-link o-link--secondary o-link--sm c-quick-links-card__link" href="/" target="_self" tabindex="-1">
<span class="o-link__label">
View More
</span>
<span class="o-icon o-icon--md">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6874 6.27566C14.055 5.90811 14.6509 5.90811 15.0185 6.27566L20 11.6471C20 11.6621 19.9996 11.6772 19.9989 11.6922C19.9882 11.9178 19.8966 12.1403 19.7243 12.3126L15.0185 17.0185C14.6509 17.386 14.055 17.386 13.6874 17.0185C13.3199 16.6509 13.3199 16.055 13.6874 15.6874L16.7866 12.5882H4.94118C4.42138 12.5882 4 12.1669 4 11.6471C4 11.1273 4.42138 10.7059 4.94118 10.7059H16.7866L13.6874 7.60669C13.3199 7.23914 13.3199 6.64322 13.6874 6.27566ZM15.0185 6.27566L20 11.6384C19.9978 11.4004 19.9059 11.1631 19.7243 10.9815L15.0185 6.27566Z" />
</svg>
</span>
</a>
</div>
</div>
{% set base_class = quick_links_card.base_class|default('c-quick-links-card') %}
{% if quick_links_card %}
<div class="{{ bem(base_class, quick_links_card.element, quick_links_card.modifiers, quick_links_card.extra) }} js-gsap-scale-in">
{% include "@link" with {
"link": {
"url": quick_links_card.link.url,
"target": quick_links_card.link.target,
"attributes": {
"aria-label": quick_links_card.heading,
"tabindex": "0"
},
"extra": bem(base_class, 'link-overlay')
}
} %}
{% include "@background" with {
"background": {
"image": {
"id": "quick-links-card-" ~ quick_links_card.id,
"src": quick_links_card.image ~ (quick_links_card.modifiers == "image-overlay" ? "/480/480" : "/480/270"),
"sources": [
{
"media": "(min-width: 480px)",
"srcset": quick_links_card.image ~ (quick_links_card.modifiers == "image-overlay" ? "/768/768" : "/768/432")
}
]
},
"extra": bem(base_class, 'background')
}
} %}
<div class="{{ bem(base_class, 'content') }}">
<div class="{{ bem(base_class, 'body') }}">
{% include "@icon" with {
"icon": {
"name": quick_links_card.icon,
"modifiers": "xl",
"extra": bem(base_class, 'icon')
}
} %}
{% include "@heading" with {
"heading": {
"level": "3",
"size": "sm",
"text": quick_links_card.heading,
"extra": bem(base_class, 'heading')
}
} %}
{% include "@dek" with {
"dek": {
"text": quick_links_card.dek,
"extra": bem(base_class, 'dek')
}
} %}
</div>
{% if quick_links_card.modifiers == "image-overlay" %}
{% include "@button" with {
"button": {
"url": quick_links_card.link.url,
"text": quick_links_card.link.text,
"target": quick_links_card.link.target,
"icon": {
"name": "arrow-right",
"modifiers": "md"
},
"attributes": {
"tabindex": "-1"
},
"modifiers": "tertiary",
"extra": bem(base_class, 'button')
}
} %}
{% else %}
{% include "@link" with {
"link": {
"url": quick_links_card.link.url,
"text": quick_links_card.link.text,
"target": quick_links_card.link.target,
"icon": {
"name": "arrow-right",
"modifiers": "md"
},
"attributes": {
"tabindex": "-1"
},
"modifiers": ["secondary", "sm"],
"extra": bem(base_class, 'link')
}
} %}
{% endif %}
</div>
</div>
{% endif %}
{
"quick_links_card": {
"id": "01",
"image": "https://picsum.photos",
"icon": "about-us",
"heading": "Card Title",
"dek": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.",
"link": {
"url": "/",
"text": "View More"
}
}
}
/* ------------------------------------*\
$QUICK-LINKS-CARD
\*------------------------------------ */
.c-quick-links-card {
position: relative;
aspect-ratio: 16 / 9;
max-width: 800px;
&--image-overlay {
aspect-ratio: 1 / 1;
&::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0.1%, rgba(0, 0, 0, 0.50) 100%);
}
}
&:hover,
&:focus,
&:focus-within {
.c-quick-links-card__dek,
.c-quick-links-card__link {
opacity: 1;
visibility: visible;
max-height: 100vh;
margin-top: var(--dotd-space);
}
&.c-quick-links-card--image-overlay {
.c-quick-links-card__content {
background-color: var(--dotd-color-background-primary-default);
}
.c-quick-links-card__body {
flex: 1;
}
.c-quick-links-card__dek,
.c-quick-links-card__button {
opacity: 1;
visibility: visible;
max-height: 100vh;
}
.c-quick-links-card__link {
display: none;
}
}
}
&__content {
position: absolute;
bottom: calc(var(--dotd-space-lg) * -1);
left: var(--dotd-space-lg);
width: calc(100% - (var(--dotd-space-lg) * 2));
height: auto;
z-index: 2;
padding: var(--dotd-space);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0;
color: var(--dotd-color-content-primary-weak);
background-color: var(--dotd-color-background-default-strong);
box-shadow: var(--dotd-box-shadow);
transition: all var(--dotd-animation-duration-long) var(--dotd-animation-timing);
* {
transition: all var(--dotd-animation-duration-long) var(--dotd-animation-timing);
}
.c-quick-links-card--image-overlay & {
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
box-shadow: none;
align-items: flex-start;
padding: var(--dotd-space-lg);
}
}
&__body {
flex: 0;
}
&__heading,
&__dek,
&__link {
text-align: center;
.c-quick-links-card--image-overlay & {
text-align: left;
color: var(--dotd-color-content-primary-weak);
}
}
&__icon {
display: none;
.c-quick-links-card--image-overlay & {
display: block;
}
}
&__heading {
.c-quick-links-card--image-overlay & {
margin-top: var(--dotd-space);
}
}
&__dek {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
opacity: 0;
visibility: hidden;
max-height: 0;
.c-quick-links-card:hover & {
transition-delay: 0.3s;
}
}
&__link {
opacity: 0;
visibility: hidden;
max-height: 0;
.c-quick-links-card--image-overlay & {
display: none;
}
}
&__button {
opacity: 0;
visibility: hidden;
max-height: 0;
position: absolute;
.c-quick-links-card:hover & {
transition-delay: 0.3s;
}
}
&__link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% + var(--dotd-space-lg));
z-index: 3;
display: block;
pointer-events: all;
visibility: visible;
.c-quick-links-card--image-overlay & {
height: 100%;
}
}
}
No notes defined.