<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">Latest news</h2>
<div class="col-auto">
<span class="supt-button ">
<a class="supt-button__link" href=#>
<span class="supt-button__title">
View more
</span>
</a>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
View more
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</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-news">
<div class="supt-card-news__head supt-parallax-image">
<div class="supt-card-news__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-text.webp" alt="Consumer trend report 2025">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#consumer-trend-report2025">Consumer trend report 2025</a>
</h3>
<p>Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.</p>
</div>
<div class="supt-post-metas">
<div class="supt-tag">
<span class="supt-tag__label">News</span>
</div>
<svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
</svg> <time itemprop="datePublished" datetime="2025-03-05T00:00:00+00:00">March 05, 2025</time>
</div>
</div>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<div class="supt-card-news">
<div class="supt-card-news__head supt-parallax-image">
<div class="supt-card-news__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-text-img-2.webp" alt="State of AI at Verisure">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#state-of-ai-at-verisure">State of AI at Verisure</a>
</h3>
<p>Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.</p>
</div>
<div class="supt-post-metas">
<div class="supt-tag">
<span class="supt-tag__label">News</span>
</div>
<svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
</svg> <time itemprop="datePublished" datetime="2025-02-28T00:00:00+00:00">February 28, 2025</time>
</div>
</div>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<div class="supt-card-news">
<div class="supt-card-news__head supt-parallax-image">
<div class="supt-card-news__head__inner supt-parallax-image__image">
<img src="/sites/gv/files/flmngr/card-news.webp" alt="Quaterly report">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#quaterly-report">Quaterly report</a>
</h3>
<p>Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.</p>
</div>
<div class="supt-post-metas">
<div class="supt-tag">
<span class="supt-tag__label">News</span>
</div>
<svg width="3" height="4" viewBox="0 0 3 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
</svg> <time itemprop="datePublished" datetime="2025-02-16T00:00:00+00:00">February 16, 2025</time>
</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": "Latest news",
"template": "molecules/cards/card-news/card-news.twig",
"cards": [
{
"title": "Consumer trend report 2025",
"description": "Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.",
"date": "2025-03-05",
"image": {
"src": "/sites/gv/files/flmngr/card-text.webp",
"alt": "Consumer trend report 2025"
},
"link": {
"href": "#consumer-trend-report2025"
}
},
{
"title": "State of AI at Verisure",
"description": "Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.",
"date": "2025-02-28",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-2.webp",
"alt": "State of AI at Verisure"
},
"link": {
"href": "#state-of-ai-at-verisure"
}
},
{
"title": "Quaterly report",
"description": "Aliquam sodales finibus tempor. In posuere facilisis ipsum, quis faucibus libero rhoncus id. Vestibulum dictum felis vel luctus tempus aliquam eget.",
"date": "2025-02-16",
"image": {
"src": "/sites/gv/files/flmngr/card-news.webp",
"alt": "Quaterly report"
},
"link": {
"href": "#quaterly-report"
}
}
],
"button": {
"title": "View 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;
}
}