<section class="supt-section-cards supt-stagger-cards " data-nb-cards="3">
<div class="supt-section-cards__inner container">
<div class="supt-section-cards__head row align-items-center">
<h2 class="col supt-slide-up-title">Go further</h2>
</div>
<div class="supt-section-cards__body row">
<div class="col">
<div class="supt-section-cards__list">
<div class="supt-section-cards__item supt-stagger-cards__card">
<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="We are people protecting people">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Leadership</h3>
</div>
<p>Get an overview of the management team.</p>
</div>
<div class="supt-card-text__foot">
<a href="#" 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>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<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="Technology meets human response">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Press releases</h3>
</div>
<p>Catch up on our latest news.</p>
</div>
<div class="supt-card-text__foot">
<a href="#" class="supt-button-link ">
<span>
Read now
<svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
</a>
</div>
</div>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<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="Leading innovation in our industry">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Investor relations</h3>
</div>
<p>The latest reports, results and trending schedule.</p>
</div>
<div class="supt-card-text__foot">
<a href="#" class="supt-button-link ">
<span>
Learn more
<svg class="supt-icon-chevron -right" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 10" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M1.5 2.75L5.64645 6.89645C5.84171 7.09171 6.15829 7.09171 6.35355 6.89645L10.5 2.75" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-cards supt-stagger-cards {{modifiers|modifiersAttr}}" data-nb-cards="{{ cards|length }}">
<div class="supt-section-cards__inner container">
<div class="supt-section-cards__head row align-items-center">
<h2 class="col supt-slide-up-title">{{ title }}</h2>
{% if description %}
<p class="col-12 supt-section-cards__description supt-slide-up-title">{{ description }}</p>
{% endif %}
{% if button %}
<div class="col-auto">
{% include "atoms/buttons/button/button.twig" with button only %}
</div>
{% endif %}
</div>
<div class="supt-section-cards__body row">
<div class="col">
<div class="supt-section-cards__list">
{% for card in cards %}
<div class="supt-section-cards__item supt-stagger-cards__card">
{% include template with card only %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{
"title": "Go further",
"template": "molecules/cards/card-text/card-text.twig",
"cards": [
{
"title": "Leadership",
"description": "Get an overview of the management team.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-with-link.webp",
"alt": "We are people protecting people"
},
"link": {
"text": "Meet the team",
"href": "#",
"attrs": {
"target": "_blank"
}
}
},
{
"title": "Press releases",
"description": "Catch up on our latest news.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-with-link.webp",
"alt": "Technology meets human response"
},
"link": {
"text": "Read now",
"href": "#"
}
},
{
"title": "Investor relations",
"description": "The latest reports, results and trending schedule.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-with-link.webp",
"alt": "Leading innovation in our industry"
},
"link": {
"text": "Learn more",
"href": "#"
}
}
]
}
.supt-section-cards {
@mixin clamp --section-spacing, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
overflow: hidden;
padding-top: var(--section-spacing);
background: $color-grey-background;
&__inner {
display: flex;
flex-direction: column;
}
&__head {
h2 {
@extend %t-h2;
margin: 0;
}
}
&__description {
@extend %t-body-m-s;
margin-top: $spacing-4;
color: $color-grey-5;
}
&__list {
display: flex;
width: 100%;
padding-top: $spacing-6;
padding-bottom: var(--section-spacing);
--card-gutter: $spacing-1-5;
@media (min-width: $breakpoint-md) {
padding-top: $spacing-8;
--card-gutter: $spacing-2;
}
@media (max-width: calc($breakpoint-xl - 1px)) {
overflow-x: auto;
flex-wrap: nowrap;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
width: auto;
margin-inline: calc(-1 * var(--supt-container-padding-inline));
padding-inline: var(--supt-container-padding-inline);
scroll-padding-inline: var(--supt-container-padding-inline);
/* Hide scrollbar */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
&::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
}
}
&__item {
flex: 1 0 83.3333%;
padding-inline: var(--card-gutter);
@media (min-width: $breakpoint-md) {
flex-basis: 52%;
}
@media (max-width: calc($breakpoint-xl - 1px)) {
scroll-snap-align: start;
}
@media (min-width: $breakpoint-xl) {
flex-basis: calc(100% / 3);
}
&:first-child {
margin-left: calc(-1 * var(--card-gutter));
}
&:last-child {
margin-right: calc(-1 * var(--card-gutter));
}
> * {
height: 100%;
}
}
&[data-nb-cards='1'] {
.supt-section-cards__list {
justify-content: center;
}
.supt-section-cards__item {
flex-basis: 50%;
}
.supt-card-text {
@media (min-width: $breakpoint-md) {
display: grid;
grid-template-areas:
'head body'
'head foot';
}
&__head {
@media (min-width: $breakpoint-md) {
grid-area: head;
}
}
&__body {
@media (min-width: $breakpoint-md) {
grid-area: body;
align-self: flex-end;
}
}
&__foot {
@media (min-width: $breakpoint-md) {
grid-area: foot;
align-self: flex-start;
}
}
}
}
&[data-nb-cards='2'] {
@media (min-width: $breakpoint-md) {
.supt-section-cards__list {
justify-content: center;
overflow-x: hidden;
}
.supt-section-cards__item {
flex-basis: 50%;
flex-grow: 0;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
&.-no-slides {
.supt-section-cards__list {
@media (max-width: calc($breakpoint-xl - 1px)) {
display: flex;
row-gap: $spacing-12;
flex-wrap: wrap;
overflow: hidden;
scroll-snap-type: none;
width: 100%;
margin-inline: 0;
padding-inline: 0;
scroll-padding-inline: 0;
}
}
.supt-section-cards__item {
@media (max-width: calc($breakpoint-md - 1px)) {
padding: 0;
margin: 0;
}
}
}
& + .supt-section-cards[data-nb-cards='1'] {
padding-top: 0;
}
}