<li class="products-list visible" data-number-of-visible-elements="4">
<ul class="products-list__list">
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content noLink">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="products-list__item">
<div class="
tile
">
<!-- ==== <a class="tile__link" href="#"> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<a class="tile__link" href="#"><img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a product"></a>
</div>
<div class="tile__label">
<a class="tile__link" href="#">
<div class="text-label-m">Vive</div>
</a>
</div>
<div class="tile__title">
<a class="tile__link" href="#">
<h3 class="
title-m
">Casa de casa</h3>
</a>
</div>
<div class="tile__bodycopy">
<a class="tile__link" href="#">
<div class="
bodycopy-m
">
<p>Tu quieres una casa y nosotros lo hacemos posible
<p>
</div>
</a>
</div>
<div class="tile__btn">
<button id="" class="btn
" type="button" tabindex="-1">
Descubrir producto
</button>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
</ul>
<div class="products-list__link">
<button class="link
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>
</div>
</li>
<li class="products-list{{#if isVisible}} visible{{/if}}" data-number-of-visible-elements="{{ numberOfVisibleElements }}">
<ul class="products-list__list">
{{#each item}}
<li class="products-list__item">
{{> @tile this }}
</li>
{{/each}}
</ul>
<div class="products-list__link">
{{> @link link }}
</div>
</li>
{
"isVisible": true,
"numberOfVisibleElements": "4",
"item": [
{
"isAllLink": true,
"noLink": 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
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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"
}
},
{
"isAllLink": 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": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Ver más"
}
}
.products-list {
display: none;
&.visible {
display: flex;
flex-direction:column;
}
&__list{
display: flex; flex-direction: row; flex-wrap: wrap;
}
&__item {
width: 25%;
margin-bottom: 40px;
@media (--viewport-sm-min) {
margin-bottom: 30px;
}
@media (--viewport-ms-max) {
width: 50%;
}
@media (--viewport-xs-max) {
width: 100%;
}
}
&__link {display: flex;justify-content: center; margin: 40px 0;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
}
}
Esta molécula se creo para el Access Product Dropdown, pero no se está usando