<section class="supt-listing-cards -news" data-page="1">
<div class="container">
<div class="row">
<div class="supt-listing-cards__items col">
<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-9.webp" alt="Security trends 2025">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#security-trends-2025">Security trends 2025</a>
</h3>
<p>Verisure has been included by Sustainalytics on its 2025 Top-rated ESG companies.</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-01T00:00:00+00:00">March 01, 2025</time>
</div>
</div>
<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-8.webp" alt="The making of our new smart lock">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#making-smart-lock">The making of our new smart lock</a>
</h3>
<p>Verisure is proud to be awarded by the Top Employer® Institute, 2025 certification.</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-20T00:00:00+00:00">February 20, 2025</time>
</div>
</div>
<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-7.webp" alt="How we test our devices">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#device-testing">How we test our devices before going-to-market</a>
</h3>
<p>Verisure has been certified as Great Place to Work® (GPTW) in nine countries for 2a024...</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-10T00:00:00+00:00">February 10, 2025</time>
</div>
</div>
<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-6.webp" alt="Top-rated ESG companies">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#esg-top-rated">An introduction to our new brand</a>
</h3>
<p>Verisure has today released its 2023 Sustainability Report, highlighting its initiatives and results.</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-01-28T00:00:00+00:00">January 28, 2025</time>
</div>
</div>
<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-5.webp" alt="Top Employer 2025">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#top-employer-2025">Top Employer® Institute, 2025 certification</a>
</h3>
<p>Verisure is proud to be awarded by the Top Employer® Institute for 2025.</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-01-15T00:00:00+00:00">January 15, 2025</time>
</div>
</div>
<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-4.webp" alt="Great Place to Work 2024">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#gptw-2024">Great Place to Work® (GPTW) in nine countries for 2024</a>
</h3>
<p>Verisure has been certified as a Great Place to Work® in nine countries for 2024.</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="2024-12-10T00:00:00+00:00">December 10, 2024</time>
</div>
</div>
<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-3.webp" alt="Introduction to our new brand">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#new-brand-intro">An introduction to our new brand</a>
</h3>
<p>Get to know the story and vision behind our new brand identity.</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="2024-11-25T00:00:00+00:00">November 25, 2024</time>
</div>
</div>
<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="2023 Sustainability Report">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#sustainability-report-2023">2023 Sustainability Report released</a>
</h3>
<p>Verisure has released its 2023 Sustainability Report, highlighting its initiatives and results.</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="2024-10-30T00:00:00+00:00">October 30, 2024</time>
</div>
</div>
<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="Next-gen alarm system">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#next-gen-alarm">Verisure launches next-gen alarm system</a>
</h3>
<p>Our new alarm system features advanced AI detection and seamless smart home integration.</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="2024-09-15T00:00:00+00:00">September 15, 2024</time>
</div>
</div>
<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/logo-securitas-direct.webp" alt="Securitas Direct partnership">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#securitas-partnership">Partnership with Securitas Direct expands</a>
</h3>
<p>Verisure and Securitas Direct strengthen their partnership to enhance security solutions across Europe.</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="2024-08-20T00:00:00+00:00">August 20, 2024</time>
</div>
</div>
<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-with-link.webp" alt="Customer story Portugal">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#customer-story-portugal">Customer story: Peace of mind in Portugal</a>
</h3>
<p>Read how Verisure helped a family in Lisbon feel safe after a recent break-in.</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="2024-07-10T00:00:00+00:00">July 10, 2024</time>
</div>
</div>
<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-9.webp" alt="Innovation award 2024">
</div>
</div>
<div class="supt-card-news__body">
<h3>
<a href="#innovation-award-2024">Verisure wins innovation award 2024</a>
</h3>
<p>Our commitment to innovation was recognized at the European Security Awards 2024.</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="2024-06-18T00:00:00+00:00">June 18, 2024</time>
</div>
</div>
</div>
</div>
<div class="row">
<div class="supt-listing-cards__foot col">
<span class="supt-button ">
<button class="supt-button__link">
<span class="supt-button__title">
See all our stories
</span>
</button>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
See all our stories
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-listing-cards {{ modifiers|modifiersAttr }}" data-page="1">
<div class="container">
<div class="row">
<div class="supt-listing-cards__items col">
{% for card in cards %}
{% include template with card only %}
{% endfor %}
</div>
</div>
<div class="row">
<div class="supt-listing-cards__foot col">
{% include "atoms/buttons/button/button.twig" with button only %}
</div>
</div>
</div>
</section>
{
"modifiers": [
"news"
],
"template": "molecules/cards/card-news/card-news.twig",
"button": {
"title": "See all our stories"
},
"cards": [
{
"title": "Security trends 2025",
"description": "Verisure has been included by Sustainalytics on its 2025 Top-rated ESG companies.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-9.webp",
"alt": "Security trends 2025"
},
"link": {
"href": "#security-trends-2025"
},
"date": "2025-03-01"
},
{
"title": "The making of our new smart lock",
"description": "Verisure is proud to be awarded by the Top Employer® Institute, 2025 certification.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-8.webp",
"alt": "The making of our new smart lock"
},
"link": {
"href": "#making-smart-lock"
},
"date": "2025-02-20"
},
{
"title": "How we test our devices before going-to-market",
"description": "Verisure has been certified as Great Place to Work® (GPTW) in nine countries for 2a024...",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-7.webp",
"alt": "How we test our devices"
},
"link": {
"href": "#device-testing"
},
"date": "2025-02-10"
},
{
"title": "An introduction to our new brand",
"description": "Verisure has today released its 2023 Sustainability Report, highlighting its initiatives and results.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-6.webp",
"alt": "Top-rated ESG companies"
},
"link": {
"href": "#esg-top-rated"
},
"date": "2025-01-28"
},
{
"title": "Top Employer® Institute, 2025 certification",
"description": "Verisure is proud to be awarded by the Top Employer® Institute for 2025.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-5.webp",
"alt": "Top Employer 2025"
},
"link": {
"href": "#top-employer-2025"
},
"date": "2025-01-15"
},
{
"title": "Great Place to Work® (GPTW) in nine countries for 2024",
"description": "Verisure has been certified as a Great Place to Work® in nine countries for 2024.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-4.webp",
"alt": "Great Place to Work 2024"
},
"link": {
"href": "#gptw-2024"
},
"date": "2024-12-10"
},
{
"title": "An introduction to our new brand",
"description": "Get to know the story and vision behind our new brand identity.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-3.webp",
"alt": "Introduction to our new brand"
},
"link": {
"href": "#new-brand-intro"
},
"date": "2024-11-25"
},
{
"title": "2023 Sustainability Report released",
"description": "Verisure has released its 2023 Sustainability Report, highlighting its initiatives and results.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-2.webp",
"alt": "2023 Sustainability Report"
},
"link": {
"href": "#sustainability-report-2023"
},
"date": "2024-10-30"
},
{
"title": "Verisure launches next-gen alarm system",
"description": "Our new alarm system features advanced AI detection and seamless smart home integration.",
"image": {
"src": "/sites/gv/files/flmngr/card-news.webp",
"alt": "Next-gen alarm system"
},
"link": {
"href": "#next-gen-alarm",
"attrs": {}
},
"tag": {
"label": "News"
},
"date": "2024-09-15"
},
{
"title": "Partnership with Securitas Direct expands",
"description": "Verisure and Securitas Direct strengthen their partnership to enhance security solutions across Europe.",
"image": {
"src": "/sites/gv/files/flmngr/logo-securitas-direct.webp",
"alt": "Securitas Direct partnership"
},
"link": {
"href": "#securitas-partnership",
"attrs": {}
},
"tag": {
"label": "News"
},
"date": "2024-08-20"
},
{
"title": "Customer story: Peace of mind in Portugal",
"description": "Read how Verisure helped a family in Lisbon feel safe after a recent break-in.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-with-link.webp",
"alt": "Customer story Portugal"
},
"link": {
"href": "#customer-story-portugal",
"attrs": {}
},
"tag": {
"label": "News"
},
"date": "2024-07-10"
},
{
"title": "Verisure wins innovation award 2024",
"description": "Our commitment to innovation was recognized at the European Security Awards 2024.",
"image": {
"src": "/sites/gv/files/flmngr/card-text-img-9.webp",
"alt": "Innovation award 2024"
},
"link": {
"href": "#innovation-award-2024",
"attrs": {}
},
"tag": {
"label": "News"
},
"date": "2024-06-18"
}
]
}
const PER_PAGE = 9;
export class ListingCards {
$element: HTMLElement;
$items: NodeListOf<Element>;
$loadMore: HTMLElement | null = null;
page: number;
nbItems: number;
constructor($element: HTMLElement) {
this.$element = $element;
this.$items = $element.querySelectorAll('.supt-listing-cards__items > *');
this.page = parseInt(this.$element.dataset.page as string) || 1;
this.nbItems = this.$items.length;
const btn = this.$element.querySelector('.supt-listing-cards__foot button');
if (!btn) return;
this.$loadMore = btn as HTMLElement;
this.toggleHasMore();
this.bindEvents();
}
bindEvents() {
if (!this.$loadMore) return;
this.$loadMore.addEventListener('click', this.handleLoadMore.bind(this));
}
handleLoadMore() {
this.page++;
this.$element.dataset.page = this.page.toString();
this.toggleHasMore();
}
toggleHasMore() {
const hasMore = this.page * PER_PAGE < this.nbItems;
this.$element.classList.toggle('-has-more', hasMore);
}
}
.supt-listing-cards {
@mixin clamp padding-block, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
background-color: $color-grey-background;
.container {
display: flex;
flex-direction: column;
@mixin clamp gap, $spacing-8, $spacing-12, $breakpoint-xs, $breakpoint-xl;
}
&__items {
display: grid;
grid-template-columns: repeat(1, 1fr);
@media (min-width: $breakpoint-md) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $breakpoint-xl) {
grid-template-columns: repeat(3, 1fr);
}
}
&__foot {
display: flex;
justify-content: center;
align-items: center;
}
&[data-page='1'] .supt-listing-cards__items > *:nth-child(n + 10),
&[data-page='2'] .supt-listing-cards__items > *:nth-child(n + 19),
&[data-page='3'] .supt-listing-cards__items > *:nth-child(n + 28),
&[data-page='4'] .supt-listing-cards__items > *:nth-child(n + 37),
&[data-page='5'] .supt-listing-cards__items > *:nth-child(n + 46),
&[data-page='6'] .supt-listing-cards__items > *:nth-child(n + 55),
&[data-page='7'] .supt-listing-cards__items > *:nth-child(n + 64),
&[data-page='8'] .supt-listing-cards__items > *:nth-child(n + 73),
&[data-page='9'] .supt-listing-cards__items > *:nth-child(n + 82),
&[data-page='10'] .supt-listing-cards__items > *:nth-child(n + 91),
&[data-page='11'] .supt-listing-cards__items > *:nth-child(n + 100),
&[data-page='12'] .supt-listing-cards__items > *:nth-child(n + 109),
&[data-page='13'] .supt-listing-cards__items > *:nth-child(n + 118),
&[data-page='14'] .supt-listing-cards__items > *:nth-child(n + 127),
&[data-page='15'] .supt-listing-cards__items > *:nth-child(n + 136),
&[data-page='16'] .supt-listing-cards__items > *:nth-child(n + 145),
&[data-page='17'] .supt-listing-cards__items > *:nth-child(n + 154),
&[data-page='18'] .supt-listing-cards__items > *:nth-child(n + 163),
&[data-page='19'] .supt-listing-cards__items > *:nth-child(n + 172),
&[data-page='20'] .supt-listing-cards__items > *:nth-child(n + 181) {
display: none;
}
&:not(.-has-more) .supt-listing-cards__foot .supt-button {
display: none;
}
&.-press {
.supt-listing-cards__items {
@mixin clamp gap, $spacing-2, $spacing-4, $breakpoint-xs, $breakpoint-xl;
}
}
&.-news {
.supt-listing-cards__items {
@mixin clamp row-gap, $spacing-6, $spacing-12, $breakpoint-xs, $breakpoint-xl;
column-gap: $spacing-4;
}
}
}