<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="access-product">
<div class="access-product__header">
<div class="access-product__title">
<h2 class="
title-l
">
Productos que se adaptan a tus necesidades
</h2>
</div>
<div class="access-product__link">
<a class="link
" href="#">
<span>Ver todos los productos</span>
</a>
</div>
</div>
<div class="access-product__products" data-number-of-visible-elements="4">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-8 col-lg-8 col col-ms-mr-ml">
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
</div>
<div class="tile__label">
<div class="text-label-m">Vive</div>
</div>
<div class="tile__title">
<h3 class="
title-m
">Casa de casa</h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
</div>
<div class="tile__label">
<div class="text-label-m">Vive</div>
</div>
<div class="tile__title">
<h3 class="
title-m
">Casa de casa</h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
</div>
<div class="tile__label">
<div class="text-label-m">Vive</div>
</div>
<div class="tile__title">
<h3 class="
title-m
">Casa de casa</h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
</div>
<div class="tile__label">
<div class="text-label-m">Vive</div>
</div>
<div class="tile__title">
<h3 class="
title-m
">Casa de casa</h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product">
</div>
<div class="tile__label">
<div class="text-label-m">Vive</div>
</div>
<div class="tile__title">
<h3 class="
title-m
">Casa de casa</h3>
</div>
<div class="tile__bodycopy">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
</ul>
</div>
</div>
<div class="products-list__link">
<button class="link link_more link_simple link_has-icon link_has-icon_after" type="button">
<span>Ver más</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</button>
<button class="link link_more_less link_simple link_has-icon link_has-icon_after" type="button" style="display:none">
<span>Ver menos</span>
<svg class="icon icon-less icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#less"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}}
class="access-product{{#if isFourCols}} fourcols{{/if}}{{#if isAccentLight}} AccentLight{{/if}}">
<div class="access-product__header">
<div class="access-product__title">
{{> @title-l title }}
</div>
{{#if link}}
<div class="access-product__link">
{{> @link link }}
</div>
{{/if}}
</div>
<div class="access-product__products" data-number-of-visible-elements="{{data-number}}">
{{#if isFourCols}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col access-product__products__item">
{{> @tile tile }}
</li>
{{/each}}
</ul>
{{else isTwoCols}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-8 col-lg-8 col col-ms-mr-ml">
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-6 col-lg-6 col access-product__products__item">
{{> @tile tile }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else swiper}}
<div class="row">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each item}}
<div class="col-xs-12 col-ms-6 col-sm-4 col-lg-4 col access-product__products__item swiper-slide">
{{> @tile tile }}
</div>
{{/each}}
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--arrow-left' }}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next">
{{ render '@icon--arrow-right' }}
</div>
</div>
</div>
</div>
{{else}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4 col access-product__products__item">
{{> @tile tile }}
</li>
{{/each}}
</ul>
{{/if}}
{{#if moreItems}}
<div class="products-list__link">
<button class="link link_more link_simple link_has-icon link_has-icon_after" type="button">
<span>Ver más</span>
{{> "@icon--plus" plus}}
</button>
<button class="link link_more_less link_simple link_has-icon link_has-icon_after" type="button"
style="display:none">
<span>Ver menos</span>
{{render "@icon--less" less}}
</button>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"data-number": "4",
"title": {
"text": "Productos que se adaptan a tus necesidades"
},
"item": [
{
"tile": {
"isYellow": true,
"href": "#",
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a product",
"text-label": {
"text": "Vive"
},
"title": {
"text": "Casa de casa"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible<p>"
},
"text-label-overlay": {
"text": "Vive",
"colorLight": true
},
"title-overlay": {
"text": "Hipotca compra de casa",
"colorLight": true
},
"smMinNoHover": true,
"btn": {
"type": "button",
"noTabindex": true,
"text": "Descubrir producto"
}
}
},
{
"tile": {
"isYellow": true,
"href": "#",
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a product",
"text-label": {
"text": "Vive"
},
"title": {
"text": "Casa de casa"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible<p>"
},
"text-label-overlay": {
"text": "Vive",
"colorLight": true
},
"title-overlay": {
"text": "Hipotca compra de casa",
"colorLight": true
},
"smMinNoHover": true,
"btn": {
"type": "button",
"noTabindex": true,
"text": "Descubrir producto"
}
}
},
{
"tile": {
"isYellow": true,
"href": "#",
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a product",
"text-label": {
"text": "Vive"
},
"title": {
"text": "Casa de casa"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible<p>"
},
"text-label-overlay": {
"text": "Vive",
"colorLight": true
},
"title-overlay": {
"text": "Hipotca compra de casa",
"colorLight": true
},
"smMinNoHover": true,
"btn": {
"type": "button",
"noTabindex": true,
"text": "Descubrir producto"
}
}
},
{
"tile": {
"isYellow": true,
"href": "#",
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a product",
"text-label": {
"text": "Vive"
},
"title": {
"text": "Casa de casa"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible<p>"
},
"text-label-overlay": {
"text": "Vive",
"colorLight": true
},
"title-overlay": {
"text": "Hipotca compra de casa",
"colorLight": true
},
"smMinNoHover": true,
"btn": {
"type": "button",
"noTabindex": true,
"text": "Descubrir producto"
}
}
},
{
"tile": {
"isYellow": true,
"href": "#",
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a product",
"text-label": {
"text": "Vive"
},
"title": {
"text": "Casa de casa"
},
"bodycopy": {
"text": "<p>Tu quieres una casa y nosotros lo hacemos posible<p>"
},
"text-label-overlay": {
"text": "Vive",
"colorLight": true
},
"title-overlay": {
"text": "Hipotca compra de casa",
"colorLight": true
},
"smMinNoHover": true,
"btn": {
"type": "button",
"noTabindex": true,
"text": "Descubrir producto"
}
}
}
],
"link": {
"href": "#",
"text": "Ver todos los productos"
},
"isTwoCols": true,
"moreItems": true,
"plus": {
"name": "plus",
"isAfter": true
},
"less": {
"name": "less",
"isAfter": true
}
}
.access-product {
&__header {
margin-bottom: 10px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
}
&__title {
margin-bottom: 20px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
&__products {
.tile {
margin-top: 30px;
@media (--viewport-sm-min) {
margin-top: 0;
}
@media (--viewport-ms-max) {
margin-top: 15px;
}
&.tile_bg-color_yellow{
margin-bottom: 30px;
@media (--viewport-ms-max) {
margin-bottom: 15px;
}
}
}
}
.tile {
&:hover, &:focus{
background-color: var(--color-accent-light);
}
&__content{
padding-top: 30px;
padding-bottom: 10px;
}
&__btn{
position: relative;
.btn{margin-bottom: 30px;}
}
}
&.AccentLight{background-color: var(--color-accent-light); padding: 40px;
}
&__link {
text-align: center;
}
/* Swiper Variation*/
@media (--viewport-ms-max){
.swiper-wrapper{
padding-left: 10px;
}
}
.swiper-container{
padding-bottom: 50px;
@media (--viewport-ms-max) {
padding-bottom:40px;
}
}
.swiper-slide{
/*background-color:var(--color-accent-light);*/
height: auto;
width: 80%;
padding-left:10px;
padding-right:10px;
}
.swiper-navigation{
display: flex;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding: 20px;
justify-content: center;
align-items: center;
.swiper-pagination {
margin: 0 40px;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill:var(--color-accent)
}
}
.swiper-button-next,
.swiper-button-prev {
top: 0;
width: 28px;
height: 20px;
margin-top: 0;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
@media (--viewport-ms-max) {
display:flex;
}
}
}
Variantes: Default, AccentLight, FourCols, Dropdown, UCIPT, Tile No Link, More items