<div class="c-link-card">
<a class="o-link c-link-card__link-overlay" href="/" target="_self" tabindex="0" aria-label="Link Card Title">
</a>
<div class="c-link-card__body">
<span class="o-icon o-icon--xl c-link-card__icon-before">
<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="M41.9348 31.9686H44.1248V34.0217H41.9348V31.9686ZM1.02656 0H0V33.902H17.9989C18.2214 37.6917 19.8553 41.0964 22.3703 43.62C25.0907 46.3404 28.8462 48.0171 32.9866 48.0171C37.1271 48.0171 40.8911 46.3318 43.6029 43.62C46.3147 40.9082 48 37.1442 48 33.0037C48 28.8633 46.3147 25.0993 43.6029 22.3875C41.9861 20.7706 40.0014 19.5217 37.7858 18.7688V0H1.02656ZM35.7327 2.05311V5.09856H2.05311V2.05311H35.7327ZM2.05311 7.15167H35.7327V18.2299C34.9542 18.0845 34.1501 17.9989 33.3374 17.9818H33.3032H33.2689H33.2347H33.2005H33.1748H33.1406H33.0465H33.0123H32.9781H32.7813H32.5931H32.4049H32.2167V17.9904H32.0285V17.9989H31.8489V18.016L31.6692 18.0331L31.5152 18.0503H31.481H31.4725L31.2928 18.0674L31.1303 18.0845H31.1046H31.0961C27.717 18.5122 24.6801 20.0691 22.3875 22.3618C22.2506 22.4987 22.1223 22.6355 21.9939 22.7724V21.4208H15.8346V27.5801H18.9913C18.478 28.9146 18.1444 30.3433 18.0331 31.8318H2.05311V7.15167ZM7.66494 11.1296H12.7977V17.2889H6.63839V11.1296H7.66494ZM10.7446 13.1827V15.2358H8.6915V13.1827H10.7446ZM7.66494 21.4379H12.7977V27.5972H6.63839V21.4379H7.66494ZM10.7446 23.491V25.5441H8.6915V23.491H10.7446ZM19.9237 23.491V25.5441H17.8706V23.491H19.9237ZM26.0146 11.1296H31.1474V17.2889H24.9881V11.1296H26.0146ZM29.0943 13.1827V15.2358H27.0412V13.1827H29.0943ZM16.8441 11.1296H21.9768V17.2889H15.8175V11.1296H16.8441ZM19.9237 13.1827V15.2358H17.8706V13.1827H19.9237ZM42.1572 23.8332C39.8817 21.5577 36.7678 20.129 33.3288 20.0435H33.3117H33.2262H33.2005H33.1748H33.1492H33.1235H33.038H33.0123H32.8498H32.6872H32.5247H32.3621H32.1996V20.052H32.0371V20.0606L31.8745 20.0777L31.7206 20.0948C28.6665 20.4028 25.9291 21.7715 23.876 23.8246C21.532 26.1686 20.0777 29.4108 20.0777 32.9952C20.0777 36.5796 21.532 39.8132 23.876 42.1657C26.2199 44.5097 29.4621 45.964 33.0465 45.964C36.6309 45.964 39.8646 44.5097 42.2171 42.1657C44.5696 39.8218 46.0153 36.5796 46.0153 32.9952C46.0153 29.4108 44.561 26.1772 42.2171 23.8246L42.1572 23.8332ZM34.0132 29.4621C34.612 29.6332 35.151 29.9583 35.5872 30.3946C36.2545 31.0618 36.6651 31.9772 36.6651 32.9952C36.6651 33.3203 36.6223 33.6368 36.5454 33.9448L40.3094 36.2545L39.2401 37.9996L35.4846 35.6984C34.8259 36.3058 33.9533 36.6737 32.9866 36.6737C31.9772 36.6737 31.0618 36.2631 30.3946 35.5958C29.7273 34.9285 29.3167 34.0132 29.3167 33.0037C29.3167 31.9943 29.7273 31.0704 30.3946 30.4031C30.8309 29.9754 31.3613 29.6503 31.9686 29.4707V23.1317H34.0217V29.4707L34.0132 29.4621ZM34.133 31.8489C34.4238 32.1397 34.612 32.5503 34.612 32.9952C34.612 33.44 34.4324 33.8507 34.1415 34.1415C33.8507 34.4324 33.44 34.6206 32.9952 34.6206C32.5503 34.6206 32.1397 34.4409 31.8489 34.1501C31.558 33.8592 31.3784 33.4486 31.3784 32.9952C31.3784 32.5418 31.558 32.1397 31.8574 31.8489C32.1483 31.558 32.5504 31.3698 33.0037 31.3698C33.4571 31.3698 33.8592 31.5495 34.1501 31.8489H34.133ZM31.9601 44.1333V41.9433H34.0132V44.1333H31.9601ZM21.8571 31.9686H24.0471V34.0217H21.8571V31.9686Z" />
</svg>
</span>
<h3 class="o-heading o-heading--sm c-link-card__heading">
Link Card Title
</h3>
<div class="c-link-card__content u-spacing">
<div class="o-dek c-link-card__dek">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.
</div>
<a class="o-link o-link--secondary c-link-card__link" href="/" target="_self" tabindex="-1">
<span class="o-link__label">
Read 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>
<span class="o-icon o-icon--xl c-link-card__icon-after">
<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="M41.9348 31.9686H44.1248V34.0217H41.9348V31.9686ZM1.02656 0H0V33.902H17.9989C18.2214 37.6917 19.8553 41.0964 22.3703 43.62C25.0907 46.3404 28.8462 48.0171 32.9866 48.0171C37.1271 48.0171 40.8911 46.3318 43.6029 43.62C46.3147 40.9082 48 37.1442 48 33.0037C48 28.8633 46.3147 25.0993 43.6029 22.3875C41.9861 20.7706 40.0014 19.5217 37.7858 18.7688V0H1.02656ZM35.7327 2.05311V5.09856H2.05311V2.05311H35.7327ZM2.05311 7.15167H35.7327V18.2299C34.9542 18.0845 34.1501 17.9989 33.3374 17.9818H33.3032H33.2689H33.2347H33.2005H33.1748H33.1406H33.0465H33.0123H32.9781H32.7813H32.5931H32.4049H32.2167V17.9904H32.0285V17.9989H31.8489V18.016L31.6692 18.0331L31.5152 18.0503H31.481H31.4725L31.2928 18.0674L31.1303 18.0845H31.1046H31.0961C27.717 18.5122 24.6801 20.0691 22.3875 22.3618C22.2506 22.4987 22.1223 22.6355 21.9939 22.7724V21.4208H15.8346V27.5801H18.9913C18.478 28.9146 18.1444 30.3433 18.0331 31.8318H2.05311V7.15167ZM7.66494 11.1296H12.7977V17.2889H6.63839V11.1296H7.66494ZM10.7446 13.1827V15.2358H8.6915V13.1827H10.7446ZM7.66494 21.4379H12.7977V27.5972H6.63839V21.4379H7.66494ZM10.7446 23.491V25.5441H8.6915V23.491H10.7446ZM19.9237 23.491V25.5441H17.8706V23.491H19.9237ZM26.0146 11.1296H31.1474V17.2889H24.9881V11.1296H26.0146ZM29.0943 13.1827V15.2358H27.0412V13.1827H29.0943ZM16.8441 11.1296H21.9768V17.2889H15.8175V11.1296H16.8441ZM19.9237 13.1827V15.2358H17.8706V13.1827H19.9237ZM42.1572 23.8332C39.8817 21.5577 36.7678 20.129 33.3288 20.0435H33.3117H33.2262H33.2005H33.1748H33.1492H33.1235H33.038H33.0123H32.8498H32.6872H32.5247H32.3621H32.1996V20.052H32.0371V20.0606L31.8745 20.0777L31.7206 20.0948C28.6665 20.4028 25.9291 21.7715 23.876 23.8246C21.532 26.1686 20.0777 29.4108 20.0777 32.9952C20.0777 36.5796 21.532 39.8132 23.876 42.1657C26.2199 44.5097 29.4621 45.964 33.0465 45.964C36.6309 45.964 39.8646 44.5097 42.2171 42.1657C44.5696 39.8218 46.0153 36.5796 46.0153 32.9952C46.0153 29.4108 44.561 26.1772 42.2171 23.8246L42.1572 23.8332ZM34.0132 29.4621C34.612 29.6332 35.151 29.9583 35.5872 30.3946C36.2545 31.0618 36.6651 31.9772 36.6651 32.9952C36.6651 33.3203 36.6223 33.6368 36.5454 33.9448L40.3094 36.2545L39.2401 37.9996L35.4846 35.6984C34.8259 36.3058 33.9533 36.6737 32.9866 36.6737C31.9772 36.6737 31.0618 36.2631 30.3946 35.5958C29.7273 34.9285 29.3167 34.0132 29.3167 33.0037C29.3167 31.9943 29.7273 31.0704 30.3946 30.4031C30.8309 29.9754 31.3613 29.6503 31.9686 29.4707V23.1317H34.0217V29.4707L34.0132 29.4621ZM34.133 31.8489C34.4238 32.1397 34.612 32.5503 34.612 32.9952C34.612 33.44 34.4324 33.8507 34.1415 34.1415C33.8507 34.4324 33.44 34.6206 32.9952 34.6206C32.5503 34.6206 32.1397 34.4409 31.8489 34.1501C31.558 33.8592 31.3784 33.4486 31.3784 32.9952C31.3784 32.5418 31.558 32.1397 31.8574 31.8489C32.1483 31.558 32.5504 31.3698 33.0037 31.3698C33.4571 31.3698 33.8592 31.5495 34.1501 31.8489H34.133ZM31.9601 44.1333V41.9433H34.0132V44.1333H31.9601ZM21.8571 31.9686H24.0471V34.0217H21.8571V31.9686Z" />
</svg>
</span>
</div>
</div>
{% set base_class = link_card.base_class|default('c-link-card') %}
{% if link_card %}
<div class="{{ bem(base_class, link_card.element, link_card.modifiers, link_card.extra) }}">
{% include "@link" with {
"link": {
"url": link_card.link.url,
"target": link_card.link.target,
"attributes": {
"aria-label": link_card.heading,
"tabindex": "0"
},
"extra": bem(base_class, 'link-overlay')
}
} %}
<div class="{{ bem(base_class, 'body') }}">
{% include "@icon" with {
"icon": {
"name": link_card.icon,
"modifiers": "xl",
"extra": bem(base_class, 'icon-before')
}
} %}
{% include "@heading" with {
"heading": {
"level": "3",
"size": "sm",
"text": link_card.heading,
"extra": bem(base_class, 'heading')
}
} %}
<div class="{{ bem(base_class, 'content') }} u-spacing">
{% include "@dek" with {
"dek": {
"text": link_card.dek,
"extra": bem(base_class, 'dek')
}
} %}
{% include "@link" with {
"link": {
"url": link_card.link.url,
"text": "Read More",
"target": link_card.link.target,
"icon": {
"name": "arrow-right",
"modifiers": "md"
},
"attributes": {
"tabindex": "-1"
},
"modifiers": "secondary",
"extra": bem(base_class, 'link')
}
} %}
</div>
{% include "@icon" with {
"icon": {
"name": link_card.icon,
"modifiers": "xl",
"extra": bem(base_class, 'icon-after')
}
} %}
</div>
</div>
{% endif %}
{
"link_card": {
"icon": "news-updates",
"heading": "Link Card Title",
"dek": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus id nisi ac ornare.",
"link": {
"url": "/"
}
}
}
/* ------------------------------------*\
$LINK-CARD
\*------------------------------------ */
:root {
--dotd-layout-height-link-card: 180px;
--dotd-animation-offset: -48px;
}
@include media(">medium") {
:root {
--dotd-layout-height-link-card: 200px;
}
}
.c-link-card {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
gap: 0;
background-color: var(--dotd-color-body-background);
border: var(--dotd-border-width-md) solid var(--dotd-color-border-default-weak);
box-shadow: none;
transition: all var(--dotd-animation-duration-long) var(--dotd-animation-timing);
&:hover,
&:focus,
&:focus-within {
background-color: var(--dotd-color-background-default-strong);
box-shadow: var(--dotd-box-shadow);
.c-link-card__icon-before {
opacity: 0;
visibility: hidden;
max-height: 0;
top: var(--dotd-animation-offset);
}
.c-link-card__heading {
margin-top: calc(var(--dotd-space) * -1);
}
.c-link-card__icon-after {
bottom: 0;
}
.c-link-card__content {
opacity: 1;
visibility: visible;
max-height: var(--dotd-layout-height-link-card);
bottom: 0;
margin-top: var(--dotd-space);
}
}
&__body {
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
overflow: hidden;
padding: var(--dotd-space-md);
min-height: var(--dotd-layout-height-link-card);
max-height: var(--dotd-layout-height-link-card);
height: var(--dotd-layout-height-link-card);
> * {
transition: all var(--dotd-animation-duration-long) var(--dotd-animation-timing);
}
}
&__icon-before {
position: relative;
opacity: 1;
visibility: visible;
max-height: var(--dotd-icon-xl);
top: 0;
color: var(--dotd-color-content-primary-default);
margin-bottom: var(--dotd-space);
}
&__heading {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 0;
}
&__dek {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
&__content {
position: relative;
opacity: 0;
visibility: hidden;
max-height: 0;
bottom: var(--dotd-animation-offset);
overflow: hidden;
z-index: 0;
}
&__icon-after {
opacity: 0.2;
transition: bottom var(--dotd-animation-duration-long) var(--dotd-animation-timing);
position: absolute;
bottom: var(--dotd-animation-offset);
right: var(--dotd-space-md);
color: var(--dotd-color-content-secondary-default);
pointer-events: none;
z-index: 2;
}
&__link-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: block;
pointer-events: all;
visibility: visible;
}
}
No notes defined.