<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="reviews">
<div class="reviews__content">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-6 col-lg-6">
<div class="reviews__content-wrapper">
<div class="reviews__label">
<div class="text-label-m">nuestros clientes opinan</div>
</div>
<div class="reviews__title">
<h2 class="
title-l
">
Nuestro mayor interés, la satisfacción de nuestros clientes
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="reviews__main">
<div class="reviews__ekomi">
<div class="ekomi-rating">
<div class="ekomi-rating__pic">
<a class="ekomi-rating__link" href="https://www.ekomi.es/testimonios-union-de-creditos-inmobiliarios-uci.html" target="_blank" noreferrer noopener>
<img class="ekomi-rating__img" src="/dist/images/ekomi.png" alt="eKomi quality mark">
</a>
</div>
<div class="ekomi-rating__number">
<div class="
number-xl
"><span>9,6/10</span></div>
</div>
<div class="ekomi-rating__label">
<div class="text-label-m">+ de 4000 opiniones</div>
</div>
</div>
<div class="reviews__nav">
<div class="reviews__nav-back nav-back">
<div class="
nav-arrow
">
<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="reviews__nav-forward nav-forward">
<div class="
nav-arrow
">
<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="reviews__swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">Sep 2019</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>La verdad que un servicio bastante bueno y serio.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">Sep 2019</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>3 Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">3 Sep 2019</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>4 La verdad que un servicio bastante bueno y serio.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">4 Sep 2019</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>5 Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">5 Sep 2019</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="tile-review">
<div class="tile-review__rating">
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
"></span>
</div>
<div class="star-wrapper">
<span class="star
star_hollow
"></span>
</div>
</div>
<div class="tile-review__bodycopy">
<div class="
especial-m
">
<p>6 La verdad que un servicio bastante bueno y serio.</p>
</div>
</div>
<div class="tile-review__date">
<div class="text-label-m">6 Sep 2019</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="reviews__nav">
<div class="reviews__nav-back nav-back">
<div class="
nav-arrow
">
<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="reviews__nav-forward nav-forward">
<div class="
nav-arrow
">
<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="reviews__link">
<a class="link
" href="#">
<span>A long line for a link</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="reviews{{#if isAccentLightBG}} accent-light-bg{{/if}}">
<div class="reviews__content">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-6 col-lg-6">
<div class="reviews__content-wrapper">
<div class="reviews__label">
{{> @text-label-m label }}
</div>
<div class="reviews__title">
{{> @title-l title }}
</div>
</div>
</div>
</div>
</div>
<div class="reviews__main">
<div class="reviews__ekomi">
{{> @ekomi-rating ekomi }}
<div class="reviews__nav">
<div class="reviews__nav-back nav-back">
{{ render '@nav-arrow--back' }}
</div>
<div class="reviews__nav-forward nav-forward">
{{ render '@nav-arrow--forward' }}
</div>
</div>
</div>
<div class="reviews__swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each review }}
<div class="swiper-slide">
{{> @tile-review this }}
</div>
{{/each}}
</div>
</div>
</div>
<div class="reviews__nav">
<div class="reviews__nav-back nav-back">
{{ render '@nav-arrow--back' }}
</div>
<div class="reviews__nav-forward nav-forward">
{{ render '@nav-arrow--forward' }}
</div>
</div>
</div>
{{#if link}}
<div class="reviews__link">
{{> @link link }}
</div>
{{/if}}
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"label": {
"text": "nuestros clientes opinan"
},
"title": {
"text": "Nuestro mayor interés, la satisfacción de nuestros clientes"
},
"link": {
"href": "#",
"text": "A long line for a link"
},
"ekomi": {
"href": "https://www.ekomi.es/testimonios-union-de-creditos-inmobiliarios-uci.html",
"src": "/dist/images/ekomi.png",
"alt": "eKomi quality mark",
"number": {
"number": "9,6/10"
},
"label": {
"text": "+ de 4000 opiniones"
}
},
"review": [
{
"bodycopy": {
"text": "<p>Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>"
},
"date": {
"text": "Sep 2019"
}
},
{
"bodycopy": {
"text": "<p>La verdad que un servicio bastante bueno y serio.</p>"
},
"date": {
"text": "Sep 2019"
}
},
{
"bodycopy": {
"text": "<p>3 Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>"
},
"date": {
"text": "3 Sep 2019"
}
},
{
"bodycopy": {
"text": "<p>4 La verdad que un servicio bastante bueno y serio.</p>"
},
"date": {
"text": "4 Sep 2019"
}
},
{
"bodycopy": {
"text": "<p>5 Ha sido una experiencia totalmente positiva. Por parte de nuestro gestor, una total atención, claridad, implicación y empatía.</p>"
},
"date": {
"text": "5 Sep 2019"
}
},
{
"bodycopy": {
"text": "<p>6 La verdad que un servicio bastante bueno y serio.</p>"
},
"date": {
"text": "6 Sep 2019"
}
}
]
}
.reviews {
&__content {
margin-bottom: 40px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 60px;
}
.reviews__ekomi{
background-color: var(--color-white);
}
}
&__label {
margin-bottom: 20px;
}
&__link {
text-align: center;
margin-top: 30px;
@media (--viewport-xs-max) {
margin-top: 20px;
}
}
&__main {
@media (--viewport-sm-min) {
position: relative;
min-height: 314px;
}
@media (--viewport-lg-min) {
min-height: 352px;
}
}
&__ekomi {
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
@media (--viewport-sm-min) {
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translate(-50%, 0);
padding: 0 20px;
}
.ekomi-rating {
@media (--viewport-sm-min) {
margin-bottom: 30px;
}
}
.reviews__nav {
display: none;
@media (--viewport-sm-min) {
display: flex;
}
}
}
&__swiper {
position: relative;
z-index: 0;
margin-bottom: 30px;
@media (--viewport-sm-min) {
padding-top: 74px;
margin-bottom: 0;
}
}
&__nav {
display: flex;
justify-content: space-between;
align-items: center;
@media (--viewport-ms-min) {
justify-content: center;
}
@media (--viewport-sm-min) {
display: none;
}
}
&.accent-light-bg{background-color: var(--color-accent-light);
padding: 40px 20px 30px;
@media (--viewport-xs-max) {
margin: 0 -20px;
}
.reviews__ekomi{
background-color: var(--color-accent-light);
}
}
}
No notes defined.