<div class="supt-card-press-release " itemscope itemtype="https://schema.org/Article">
<div class="supt-card-press-release__head">
<div class="supt-post-metas">
<div class="supt-tag">
<span class="supt-tag__label">Press release</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-05-05T00:00:00+00:00">May 05, 2025</time>
</div>
</div>
<div class="supt-card-press-release__body">
<h3 itemprop="name">Verisure Launches its 2024 Annual Report</h3>
<p itemprop="abstract">Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.</p>
</div>
<div class="supt-card-press-release__foot">
<a href="#press-release" class="supt-button-link " target="_blank" itemprop="url">
<span>
Read more
<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-press-release {{ modifiers|modifiersAttr }}" itemscope itemtype="https://schema.org/Article">
<div class="supt-card-press-release__head">
{% if icon %}
<div class="supt-card-press-release__head-icon">
{% include "02-icons/"~ icon ~"-icon.twig" with { modifiers: icon_modifiers } %}
</div>
{% else %}
{% include "atoms/post-metas/post-metas.twig" with {
"tag": {label: "Press release"},
"date": date
} only %}
{% endif %}
</div>
<div class="supt-card-press-release__body">
<h3 itemprop="name">{{ title }}</h3>
<p itemprop="abstract">{{ description }}</p>
</div>
{% if link %}
<div class="supt-card-press-release__foot">
{% include "atoms/buttons/button-link/button-link.twig" with link|default({})|merge({ attrs: link.attrs|default({})|merge({ itemprop: "url" }) }) only %}
</div>
{% endif %}
</div>
{
"date": "2025-05-05",
"title": "Verisure Launches its 2024 Annual Report",
"description": "Verisure, the leading provider of professionally monitored security systems for residential and small business customers in Europe and Latin America, has released its 2024 Annual Report.",
"link": {
"href": "#press-release",
"text": "Read more",
"attrs": {
"target": "_blank"
}
}
}
.supt-card-press-release {
@mixin expand-link;
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid $color-grey-2;
background: transparent;
@mixin clamp padding, $spacing-8, $spacing-12, $breakpoint-xs, $breakpoint-xl;
@mixin clamp gap, $spacing-6, $spacing-8, $breakpoint-xs, $breakpoint-xl;
transition: $transition-fast ease-in-out;
transition-property: background-color, box-shadow, border-color;
&:hover,
&:focus-within {
background: $color-grey-background;
box-shadow:
8px 8px 16px 0px $color-grey-1,
-8px -8px 16px 0px $color-white;
border-color: transparent;
}
&__head {
&-icon {
@mixin clamp --ico-size, 40px, 56px, $breakpoint-xs, $breakpoint-xl;
svg {
width: var(--ico-size);
height: var(--ico-size);
}
}
}
&__body {
display: flex;
flex-direction: column;
gap: $spacing-2;
width: 100%;
flex-grow: 1;
@media (min-width: $breakpoint-md) {
gap: $spacing-3;
}
h2,
h3,
h4 {
@extend %t-h4;
margin: 0;
}
p {
@extend %t-body-s;
color: $color-grey-5;
margin: 0;
}
}
&:not(.-full-desc) {
.supt-card-press-release__body {
p {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
}
}
}
}