<section class="supt-section-text-media -dark">
<div class="supt-section-text-media__wrapper">
<span class="supt-line -glow">
<span class="supt-line__line -first">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 130 389" fill="none" class="supt-line__glow">
<g filter="url(#supt-line-filter-glow)">
<path d="M65 0L65 325" stroke="white" stroke-width="2" vector-effect="non-scaling-stroke" />
</g>
</svg>
</span>
</span>
<div class="container">
<div class="row">
<div class="supt-section-text-media__media-col col-md-6">
<div class="supt-section-text-media__media supt-parallax-image">
<img src="/sites/gv/files/flmngr/section-text-media.webp" alt="Section Text Media" class="supt-parallax-image__image" />
</div>
</div>
<div class="supt-section-text-media__inner col-md-5 offset-md-1 supt-parallax-element">
<h2 class="supt-section-text-media__title supt-parallax-element__item">What we do</h2>
<div class="supt-section-text-media__content supt-parallax-element__children">
<p>Verisure is the number 1 provider of <strong>professionally monitored</strong> security services with 24/7 response in Europe and Latin America. Every day, our dedicated teams use leading technology to protect more than 5.7 million families and small businesses across 17 countries. With over 35 years of insights, experience, and innovation, Verisure is known for category-creating marketing, sales excellence, innovative products and services, and customer-centricity.</p>
</div>
<div class="supt-section-text-media__cta supt-parallax-element__item">
<span class="supt-button -dark ">
<a class="supt-button__link" href=#our-history>
<span class="supt-button__title">
Our history
</span>
</a>
<span class="supt-button__wrapper">
<span class="supt-button__inner">
<span class="supt-button__title -clone" aria-hidden="true">
Our history
</span>
<span class="supt-button__mask">
<span class="supt-button__mask__inner"></span>
</span>
</span>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
No notes defined.
{% set columns = columns|default({
"media": "col-md-6",
"inner": "col-md-5 offset-md-1"
}) %}
<section class="supt-section-text-media {{ modifiers|modifiersAttr }}">
<div class="supt-section-text-media__wrapper">
{% if modifiers|contains('dark') %}
{% include 'atoms/line/line--glow.twig' %}
{% else %}
{% include 'atoms/line/line.twig' %}
{% endif %}
<div class="container">
<div class="row">
<div class="supt-section-text-media__media-col {{ columns.media }}">
<div class="supt-section-text-media__media {{ noParallax == true ? '' : 'supt-parallax-image' }}">
{% if image %}
<img src="{{ path(image.src) }}" alt="{{ image.alt }}" class="supt-parallax-image__image"/>
{% elseif video %}
{% include 'molecules/video/video.twig' with video only %}
{% endif %}
</div>
</div>
<div class="supt-section-text-media__inner {{ columns.inner }} supt-parallax-element">
<h2 class="supt-section-text-media__title supt-parallax-element__item">{{ title }}</h2>
<div class="supt-section-text-media__content supt-parallax-element__children">{{ content }}</div>
{% if cta %}
<div
class="supt-section-text-media__cta supt-parallax-element__item">
{# If cta is an array, display button-double, otherwise display button #}
{% if cta is array %}
{% include 'molecules/button-double/button-double.twig' with {
buttons: cta
} only %}
{% else %}
{% include 'atoms/buttons/button/button.twig' with cta|merge({modifiers: modifiers}) only %}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</section>
{
"title": "What we do",
"content": "<p>Verisure is the number 1 provider of <strong>professionally monitored</strong> security services with 24/7 response in Europe and Latin America. Every day, our dedicated teams use leading technology to protect more than 5.7 million families and small businesses across 17 countries. With over 35 years of insights, experience, and innovation, Verisure is known for category-creating marketing, sales excellence, innovative products and services, and customer-centricity.</p>",
"cta": {
"title": "Our history",
"href": "#our-history"
},
"image": {
"src": "/sites/gv/files/flmngr/section-text-media.webp",
"alt": "Section Text Media"
},
"modifiers": [
"dark"
]
}
import { Line, LineGlow } from '@/components/atoms/line';
export class SectionTextMedia {
$element: HTMLElement;
line: LineGlow | Line;
isDark: boolean;
constructor($element: HTMLElement) {
this.$element = $element;
this.isDark = this.$element.classList.contains('-dark');
const lineOptions = {
scale: {
mobile: { x: [0, 1], y: [1, 1] },
desktop: { x: [1, 1], y: [0, 1] },
},
threshold: {
enter: 'center top',
leave: 'center bottom',
},
};
const $line = this.$element.querySelector('.supt-line') as HTMLElement;
this.line = this.isDark
? new LineGlow($line, this.$element, lineOptions)
: new Line($line, this.$element, lineOptions);
}
}
.supt-section-text-media {
background: $color-grey-background;
.container {
--container-width: $grid-container-max-width;
}
.row {
margin-block: 0;
align-items: stretch;
}
&__wrapper {
position: relative;
overflow: hidden;
}
&__inner {
align-self: center;
margin-top: $spacing-8;
margin-bottom: $spacing-16;
@media (min-width: $breakpoint-lg) {
margin-top: $spacing-16;
margin-bottom: $spacing-24;
}
}
&__media-col {
flex: 1;
}
&__media {
overflow: hidden;
width: 100vw;
margin-inline: calc(var(--supt-container-padding-inline) * -1);
aspect-ratio: 1/1;
@media (min-width: $breakpoint-md) {
height: 100%;
margin-inline: 0;
margin-left: calc(-1 * (var(--supt-container-padding-inline)));
width: calc(100% + var(--supt-container-padding-inline) + $grid-gutter-width);
}
@media (min-width: $grid-container-max-mq) {
margin-left: calc(
-1 * (((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline))
);
width: calc(
100% + ((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline) +
$grid-gutter-width
);
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1/1;
}
}
&__title {
@extend %t-h2;
margin: 0;
span {
opacity: 0.6;
}
}
&__content {
color: $color-grey-5;
> p {
margin-top: $spacing-3;
@media (min-width: $breakpoint-lg) {
margin-top: $spacing-4;
}
}
> ul,
> ol {
margin-top: $spacing-4;
@media (min-width: $breakpoint-lg) {
margin-top: $spacing-6;
}
}
p {
@extend %paragraph-section-text;
}
ul,
ol {
@extend %list-section-text;
}
}
&__cta {
margin-block-start: $spacing-8;
}
.supt-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
display: none;
--line-xs-width: 1px;
--line-xs-height: 100%;
--line-md-width: 1px;
--line-md-height: 100%;
@media (min-width: $breakpoint-md) {
display: block;
}
&.-glow {
inset: 0;
transform: none;
}
}
&.-dark {
background: none; /* Coming from body background */
.supt-section-text-media__inner {
color: $color-white;
}
.supt-section-text-media__content {
color: $color-white;
ul li {
color: $color-white;
}
}
}
&.-right {
.supt-section-text-media__media-col {
@media (min-width: $breakpoint-md) {
order: 2;
}
}
.supt-section-text-media__media {
@media (min-width: $breakpoint-md) {
margin-left: calc(-1 * $grid-gutter-width);
width: calc(100% + var(--supt-container-padding-inline) + $grid-gutter-width);
}
@media (min-width: $grid-container-max-mq) {
width: calc(
100% + ((100vw - var(--container-width)) / 2) + var(--supt-container-padding-inline) +
$grid-gutter-width
);
}
}
}
&.-image-right {
.supt-section-text-media__media img {
object-position: right;
}
}
&.-image-top {
.supt-section-text-media__media img {
object-position: top;
}
}
&.-image-x-70 {
.supt-section-text-media__media img {
object-position: 70% 50%;
}
}
}