<section class="supt-section-logoboard ">
<div class="supt-section-logoboard__container container">
<div class="supt-section-logoboard__head row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<h2 class="supt-slide-up-title">Our brands</h2>
</div>
</div>
<div class="supt-section-logoboard__body row">
<div class="col">
<div class="supt-section-logoboard__items-wrapper">
<div class="supt-section-logoboard__items">
<div class="supt-section-logoboard__item -verisure">
<img src="/sites/gv/files/flmngr/verisure-logo.svg" alt="Logo Verisure">
</div>
<div class="supt-section-logoboard__item ">
<a class="supt-section-logoboard__item-link" href="#arlo">
<img src="/sites/gv/files/flmngr/logo-arlo.webp" alt="Logo Arlo">
</a>
</div>
<div class="supt-section-logoboard__item ">
<a class="supt-section-logoboard__item-link" href="#securitas-direct">
<img src="/sites/gv/files/flmngr/logo-securitas-direct.webp" alt="Logo Securitas Direct">
</a>
</div>
</div>
<span class="supt-line">
<span class="supt-line__inner"></span>
</span>
</div>
</div>
</div>
</div>
</section>
No notes defined.
<section class="supt-section-logoboard {{ modifiers|modifiersAttr }}">
<div class="supt-section-logoboard__container container">
<div class="supt-section-logoboard__head row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
<h2 class="supt-slide-up-title">{{ title }}</h2>
{% if description %}
<p class="supt-section-logoboard__description">{{ description }}</p>
{% endif %}
</div>
</div>
<div class="supt-section-logoboard__body row">
<div class="col">
<div class="supt-section-logoboard__items-wrapper">
<div class="supt-section-logoboard__items">
{% for item in items %}
<div class="supt-section-logoboard__item {{ item.modifiers|modifiersAttr }}">
{% if item.link %}
<a class="supt-section-logoboard__item-link" {{ item.link|attrs }}>
<img {{ item.img|merge({src: path(item.img.src)} )|attrs }}>
</a>
{% else %}
<img {{ item.img|merge({src: path(item.img.src)} )|attrs }}>
{% endif %}
</div>
{% endfor %}
</div>
{# Bottom horizontal line #}
{% include 'atoms/line/line.twig' %}
</div>
</div>
</div>
</div>
</section>
{
"title": "Our brands",
"items": [
{
"modifiers": [
"verisure"
],
"img": {
"src": "/sites/gv/files/flmngr/verisure-logo.svg",
"alt": "Logo Verisure"
}
},
{
"img": {
"src": "/sites/gv/files/flmngr/logo-arlo.webp",
"alt": "Logo Arlo"
},
"link": {
"href": "#arlo"
}
},
{
"img": {
"src": "/sites/gv/files/flmngr/logo-securitas-direct.webp",
"alt": "Logo Securitas Direct"
},
"link": {
"href": "#securitas-direct"
}
}
]
}
.supt-section-logoboard {
@mixin clamp padding-bottom, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
background: $color-grey-background;
&__container {
display: flex;
flex-direction: column;
@mixin clamp gap, $spacing-16, $spacing-20, $breakpoint-xs, $breakpoint-xl;
}
&__head {
> *:first-child {
@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
border-top: 1px solid $color-grey-2;
}
h2,
h3,
h4 {
@extend %t-h2;
margin: 0;
text-align: center;
}
}
&__description {
@extend %t-body-sm;
margin-top: $spacing-4;
text-align: center;
}
&__items-wrapper {
position: relative;
.supt-line {
--line-xs-width: 100%;
--line-xs-height: 1px;
--line-md-width: 100%;
--line-md-height: 1px;
position: absolute;
bottom: 0;
left: 0;
.supt-line__inner {
transform: scaleX(0);
}
}
}
&__items {
@mixin clamp padding-bottom, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
border-bottom: 1px solid $color-grey-2;
padding-inline: $spacing-4;
display: flex;
flex-flow: row wrap;
align-items: end;
justify-content: center;
gap: $spacing-20 $spacing-16;
}
&__item {
a {
display: flex;
}
img {
@mixin clamp height, 48px, 56px, $breakpoint-xs, $breakpoint-xl;
object-fit: contain;
object-position: center;
}
&.-verisure {
align-self: center;
@media (max-width: calc($breakpoint-md - 1px)) {
flex-basis: 100%;
display: flex;
justify-content: center;
}
img {
@mixin clamp height, 100px, 150px, $breakpoint-xs, $breakpoint-xl;
}
}
}
&:not(.-awards) {
.supt-section-logoboard__items {
@media (min-width: $breakpoint-md) {
display: grid;
grid-template-areas:
'logo1 logo2'
'logo1 logo3';
}
}
.supt-section-logoboard__item {
&:nth-child(1) {
grid-area: logo1;
}
&:nth-child(2) {
grid-area: logo2;
}
&:nth-child(3) {
grid-area: logo3;
}
}
}
&.-awards {
.supt-section-logoboard__items {
@mixin clamp padding-inline, $spacing-4, $spacing-24, $breakpoint-xs, $breakpoint-xl;
@mixin clamp row-gap, $spacing-16, $spacing-24, $breakpoint-xs, $breakpoint-xl;
@mixin clamp column-gap, 36, 80, $breakpoint-xs, $breakpoint-xl;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
@media (min-width: $breakpoint-md) {
grid-template-columns: repeat(3, 1fr);
}
}
.supt-section-logoboard__item {
display: flex;
justify-content: center;
align-items: center;
img {
@mixin clamp height, 72px, 100px, $breakpoint-xs, $breakpoint-xl;
max-width: 100%;
mix-blend-mode: darken;
}
}
& + .supt-section-copyright {
padding-top: 0;
}
}
}