<div class="supt-card-text -has-link">
<div class="supt-card-text__head supt-parallax-image">
<div class="supt-card-text__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-text-with-link.webp" alt="Leadership">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Leadership</h3>
</div>
<p>Get an overview of the management team. Meet the team</p>
</div>
<div class="supt-card-text__foot">
<a href="#team" class="supt-button-link " target="_blank">
<span>
Meet the team
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 12V2.31766C14 2.04152 13.7761 1.81766 13.5 1.81766H3.81766" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M2 14L13 3" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
</a>
</div>
</div>
No notes defined.
<div class="supt-card-text{% if link %} -has-link{% endif %}">
<div class="supt-card-text__head{% if not noParallax %} supt-parallax-image{% endif %}">
<div class="supt-card-text__head__inner{% if not noParallax %} supt-parallax-image__image{% endif %}">
<img src="{{ path(image.src) }}" alt="{{ image.alt }}">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>{{ title }}</h3>
{% if subtitle %}
<p class="supt-card-text__subtitle">{{ subtitle }}</p>
{% endif %}
</div>
<p>{{ description }}</p>
</div>
{% if link %}
<div class="supt-card-text__foot">
{% include "atoms/buttons/button-link/button-link.twig" with link only %}
</div>
{% endif %}
</div>
{
"title": "Leadership",
"description": "Get an overview of the management team. Meet the team",
"image": {
"src": "/sites/gv/files/flmngr/card-text-with-link.webp",
"alt": "Leadership"
},
"link": {
"href": "#team",
"text": "Meet the team",
"attrs": {
"target": "_blank"
}
}
}
.supt-card-text {
@extend %expand-link;
display: flex;
flex-direction: column;
gap: $spacing-4;
@media (min-width: $breakpoint-md) {
gap: $spacing-6;
}
&__head {
aspect-ratio: 4 / 3;
overflow: hidden;
&__inner {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
&__body {
display: flex;
flex-direction: column;
gap: $spacing-1-5;
padding-right: $spacing-6;
@media (min-width: $breakpoint-md) {
gap: $spacing-3;
}
h2,
h3,
h4 {
@extend %t-h4;
margin-bottom: 0;
}
p {
@extend %t-body-s;
color: $color-grey-5;
&.supt-card-text__subtitle {
@extend %t-body-sm;
color: $color-black;
}
}
}
&.-has-link {
@mixin card-hover .supt-card-text;
}
}