<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="testimonials">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-1 col col-text">
<div class="testimonials__content">
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-mr-ml col-ms-mr-ml col-sm-9 col-md-11 col-lg-11 col">
<div class="testimonials__content-wrapper">
<div class="testimonials__title">
<h1 class="
title-l
">
Nuestro equipo siempre cerca de ti
</h1>
</div>
<div class="testimonials__bodycopy rich-text">
<div class="
bodycopy-m
">
<p>Las empresas no son más que papeles sin las personas que trabajan en ellas. Por eso, queremos explicarte cómo somos por dentro para que puedas conocernos mejor y descubrir nuestro mejor valor: nuestra gente.</p>
</div>
</div>
<div class="testimonials__link">
<a class="link
" href="#">
<span>Quiénes somos</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-4 col-lg-4 col col-swiper">
<div class="testimonials__swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="tile-testimonial">
<div class="tile-testimonial__box">
<div class="tile-testimonial__content">
<div class="tile-testimonial__quote-mark">
<span>“</span>
</div>
<div class="tile-testimonial__bodycopy rich-text">
<div class="
especial-m
especial-m_color_light
">
<p>Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-testimonial__author">
<div class="tile-testimonial__name">
<div class="text-label-m text-label-m_color_light">Pilar Camacho</div>
</div>
<div class="tile-testimonial__organization">
<div class="text-label-m text-label-m_color_light">COMERCIAL UCI</div>
</div>
</div>
</div>
<div class="tile-testimonial__nav">
<div class="tile-testimonial__back nav-back">
<div class="
nav-arrow
nav-arrow_light
">
<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="tile-testimonial__forward nav-forward">
<div class="
nav-arrow
nav-arrow_light
">
<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 class="tile-testimonial__line">
<div class="line"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-testimonial">
<div class="tile-testimonial__box">
<div class="tile-testimonial__content">
<div class="tile-testimonial__quote-mark">
<span>“</span>
</div>
<div class="tile-testimonial__bodycopy rich-text">
<div class="
especial-m
especial-m_color_light
">
<p>2 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
<p>2 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-testimonial__author">
<div class="tile-testimonial__name">
<div class="text-label-m text-label-m_color_light">Pilar Camacho</div>
</div>
<div class="tile-testimonial__organization">
<div class="text-label-m text-label-m_color_light">COMERCIAL UCI</div>
</div>
</div>
</div>
<div class="tile-testimonial__nav">
<div class="tile-testimonial__back nav-back">
<div class="
nav-arrow
nav-arrow_light
">
<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="tile-testimonial__forward nav-forward">
<div class="
nav-arrow
nav-arrow_light
">
<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 class="tile-testimonial__line">
<div class="line"></div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-testimonial">
<div class="tile-testimonial__box">
<div class="tile-testimonial__content">
<div class="tile-testimonial__quote-mark">
<span>“</span>
</div>
<div class="tile-testimonial__bodycopy rich-text">
<div class="
especial-m
especial-m_color_light
">
<p>3 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-testimonial__author">
<div class="tile-testimonial__name">
<div class="text-label-m text-label-m_color_light">Pilar Camacho</div>
</div>
<div class="tile-testimonial__organization">
<div class="text-label-m text-label-m_color_light">COMERCIAL UCI</div>
</div>
</div>
</div>
<div class="tile-testimonial__nav">
<div class="tile-testimonial__back nav-back">
<div class="
nav-arrow
nav-arrow_light
">
<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="tile-testimonial__forward nav-forward">
<div class="
nav-arrow
nav-arrow_light
">
<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 class="tile-testimonial__line">
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6 col col-background">
<div class="testimonials__swiper-background">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonials__background"><img src="/dist/images/testimonials-bg.jpg" /></div>
</div>
<div class="swiper-slide">
<div class="testimonials__background"><img src="/dist/images/testimonials-bg2.jpg" /></div>
</div>
<div class="swiper-slide">
<div class="testimonials__background"><img src="/dist/images/testimonials-bg.jpg" /></div>
</div>
</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="testimonials">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-1 col col-text">
<div class="testimonials__content">
<div class="row">
<div class="col-xs-12 col-ms-9 col-sm-mr-ml col-ms-mr-ml col-sm-9 col-md-11 col-lg-11 col">
<div class="testimonials__content-wrapper">
<div class="testimonials__title">
{{> @title-l title }}
</div>
<div class="testimonials__bodycopy rich-text">
{{> @bodycopy-m bodycopy }}
</div>
<div class="testimonials__link">
{{> @link link }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-4 col-lg-4 col col-swiper">
<div class="testimonials__swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each testimonial }}
<div class="swiper-slide">
{{> @tile-testimonial this }}
</div>
{{/each}}
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6 col col-background">
<div class="testimonials__swiper-background">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each testimonial }}
<div class="swiper-slide">
<div class="testimonials__background"><img src="{{ this.image }}" /></div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Nuestro equipo siempre cerca de ti",
"isH1": true
},
"bodycopy": {
"text": "<p>Las empresas no son más que papeles sin las personas que trabajan en ellas. Por eso, queremos explicarte cómo somos por dentro para que puedas conocernos mejor y descubrir nuestro mejor valor: nuestra gente.</p>"
},
"link": {
"href": "#",
"text": "Quiénes somos"
},
"testimonial": [
{
"bodycopy": {
"text": "<p>Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>",
"colorLight": true
},
"text-label-name": {
"text": "Pilar Camacho",
"colorLight": true
},
"text-label-org": {
"text": "COMERCIAL UCI",
"colorLight": true
},
"arrow-left": {
"name": "arrow-left"
},
"arrow-right": {
"name": "arrow-right"
},
"image": "/dist/images/testimonials-bg.jpg"
},
{
"bodycopy": {
"text": "<p>2 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p><p>2 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>",
"colorLight": true
},
"text-label-name": {
"text": "Pilar Camacho",
"colorLight": true
},
"text-label-org": {
"text": "COMERCIAL UCI",
"colorLight": true
},
"arrow-left": {
"name": "arrow-left"
},
"arrow-right": {
"name": "arrow-right"
},
"image": "/dist/images/testimonials-bg2.jpg"
},
{
"bodycopy": {
"text": "<p>3 Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>",
"colorLight": true
},
"text-label-name": {
"text": "Pilar Camacho",
"colorLight": true
},
"text-label-org": {
"text": "COMERCIAL UCI",
"colorLight": true
},
"arrow-left": {
"name": "arrow-left"
},
"arrow-right": {
"name": "arrow-right"
},
"image": "/dist/images/testimonials-bg.jpg"
}
]
}
.testimonials {
&__content {
@media (--viewport-xs-max) {
margin-bottom: 40px;
}
@media (--viewport-sm-max) {
margin-bottom: 30px;
text-align: center;
}
@media (--viewport-sm-min) {
flex-shrink: 0;
text-align: left;
}
}
&__bodycopy {
margin-top: 20px;
}
&__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&__swiper {
@media (--viewport-sm-max) {
width: calc(100% + 62px);
margin-left: -30px;
}
@media (--viewport-xs-max) {
width: calc(100% + 39px);
margin-left: -20px;
}
.swiper {
&-slide {
width: 100%;
height: auto;
}
}
&-background {
position: relative;
z-index: 0;
width: 100%;
width: calc(100% + 39px);
margin-left: -20px;
@media (--viewport-sm-min) {
width: 100%;
margin-left: 0;
}
}
}
&__background {
width: 100%;
height: 220px;
background: center / cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
@media (--viewport-sm-min) {
height: 360px;
}
@media (--viewport-md-min) {
height: 605px;
}
/*@media (--viewport-sm-min) {
height: auto;
}*/
@media (--viewport-sm-max) {
height: 500px;
}
@media (--viewport-ms-max) {
height: 350px;
}
@media (--viewport-xs-max) {
height: auto;
max-height: 250px;
}
img{
width: 100%;
object-fit: cover;
}
}
.col {
&-text,
&-swiper,
&-background {
@media (--viewport-md-min) {
display: flex;
justify-content: center;
}
}
&-swiper{
@media (--viewport-sm-max) {
margin-top: -50px;order:3;
}
@media (--viewport-sm-only) {
margin-top: -100px;
}
@media (--viewport-ms-only) {
margin-top: -100px;
}
}
&-background {
@media (--viewport-sm-max) {
margin-top: 0;
}
/*@media (--viewport-xs-max) {
margin-top: -578px;
}*/
/*@media (--viewport-sm-only) {
margin-left: -33.33333333%;
}*/
@media (--viewport-md-min) {
margin-left: -25%;
}
}
}
}
Configurable el src del background de cada testimonio