<section class="supt-section-text-media -right">
<div class="supt-section-text-media__wrapper">
<span class="supt-line">
<span class="supt-line__inner"></span>
</span>
<div class="container">
<div class="row">
<div class="supt-section-text-media__media-col col-md-6 offset-md-1">
<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 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 -right ">
<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 = {
"media": "col-md-6 offset-md-1",
"inner": "col-md-5"
} %}
{% include 'organisms/section-text-media/section-text-media.twig' with {
columns: columns
} %}
{
"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": [
"right"
]
}
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%;
}
}
}