<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_large ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="figures-module">
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__head">
<h2 class="
title-l
">
Vuestras experiencias en cifras
</h2>
</div>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__tiles">
<div class="figures-module-swiper">
<div class="swiper-container">
<div class="swiper-wrapper
center-xs
">
<div class="swiper-slide">
<div class="figures-module__tile">
<div class="tile-figures-module">
<div class="tile-figures-module__figure">
<div class="
number-xl
"><span>95</span></div>
<span class="tile-figures-module__figure-percentage">%</span>
</div>
<div class="tile-figures-module__line"></div>
<div class="tile-figures-module__description">
<div class="
bodycopy-m
">
De satisfacción global de los clientes UCI seguimos trabajando para que sea aún más alta.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__nav between-xs center-ms">
<div class="figures-module__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="figures-module__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="figures-module{{#if isAccentLight}} accentlight{{/if}}">
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__head">
{{> @title-l title }}
</div>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__tiles">
<div class="figures-module-swiper">
<div class="swiper-container">
<div class="swiper-wrapper
{{#if lessThan3}}
center-xs
{{/if}}
">
{{#each satisfaction}}
<div class="swiper-slide">
<div class="figures-module__tile">
{{> @tile-figures-module this }}
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 col-lg-10 col">
<div class="figures-module__nav between-xs center-ms">
<div class="figures-module__nav-back nav-back">
{{ render '@nav-arrow--back-small' }}
</div>
<div class="figures-module__nav-forward nav-forward">
{{ render '@nav-arrow--forward-small' }}
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Vuestras experiencias en cifras"
},
"satisfaction": [
{
"figure": {
"number": "95"
},
"description": {
"text": "De satisfacción global de los clientes UCI seguimos trabajando para que sea aún más alta."
}
}
],
"lessThan3": true
}
.figures-module {
padding-left: 20px;
padding-right: 19px;
&.accentlight{
background-color: var(--color-accent-light);padding: 0 0 40px;
@media (--viewport-sm-max) {
padding: 0 20px 40px;
}
@media (--viewport-ms-max) {
padding: 40px 20px 40px;
}
@media (--viewport-xs-max) {
margin: 0 -20px;
}
}
&__head {
text-align: center;
margin-bottom: 30px;
@media (--viewport-sm-min) {
margin-top: 75px;
}
}
&__nav {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
padding: 0 20px;
}
&-back,
&-forward {
margin-top: 30px;
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
}
Variantes: Default, One element, Only two elements