<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">What Verisure stands for</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">
<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.webp" alt="We are people protecting people">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>We are people protecting people</h3>
</div>
<p>We are the leader in monitored security services in Europe and Latin America. We Deter, Detect, Verify and Intervene to protect our residential and small business customers from intruders, fire, and health emergencies.</p>
</div>
</div>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<div class="supt-card-text">
<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.webp" alt="Technology meets human response">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Technology meets human response</h3>
</div>
<p>Protecting what matters most to our customers is at the centre of everything we do. Our technology enables protection, but it is the care of our highly talented and engaged teams that bring customers peace of mind.</p>
</div>
</div>
</div>
<div class="supt-section-cards__item supt-stagger-cards__card">
<div class="supt-card-text">
<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.webp" alt="Leading innovation in our industry">
</div>
</div>
<div class="supt-card-text__body">
<div>
<h3>Leading innovation in our industry</h3>
</div>
<p>Our products and services protect millions of families and businesses every day. Each is built around innovations which respond to new technological capabilities, customer needs and market insights. We stay one step ahead, finding solutions and improvements in everything we do, to prevent or solve problems for each Verisure customer.</p>
</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": "What Verisure stands for",
"template": "molecules/cards/card-text/card-text.twig",
"cards": [
{
"title": "We are people protecting people",
"description": "We are the leader in monitored security services in Europe and Latin America. We Deter, Detect, Verify and Intervene to protect our residential and small business customers from intruders, fire, and health emergencies.",
"image": {
"src": "/sites/gv/files/flmngr/card-text.webp",
"alt": "We are people protecting people"
}
},
{
"title": "Technology meets human response",
"description": "Protecting what matters most to our customers is at the centre of everything we do. Our technology enables protection, but it is the care of our highly talented and engaged teams that bring customers peace of mind.",
"image": {
"src": "/sites/gv/files/flmngr/card-text.webp",
"alt": "Technology meets human response"
}
},
{
"title": "Leading innovation in our industry",
"description": "Our products and services protect millions of families and businesses every day. Each is built around innovations which respond to new technological capabilities, customer needs and market insights. We stay one step ahead, finding solutions and improvements in everything we do, to prevent or solve problems for each Verisure customer.",
"image": {
"src": "/sites/gv/files/flmngr/card-text.webp",
"alt": "Leading innovation in our industry"
}
}
]
}
.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;
}
}