<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="latest">
<div class="latest__head">
<div class="latest__title">
<h2 class="
title-l
">
Productos que se adaptan a tus necesidades
</h2>
</div>
<div class="latest__description">
<div class="
bodycopy-m
">
Todos los artículos por fecha de publicación
</div>
</div>
<div class="latest__link">
<a class="link
" href="#">
<span>Ver todos los productos</span>
</a>
</div>
</div>
<div class="latest__cards" data-number-of-visible-elements="all">
<ul class="row">
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
<div class="card">
<div class="card__content">
<div class="card__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="card__title">
<a href="#" class="card__title-link">
<h3 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h3>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}}
class="latest{{#if isFourCols}} fourcols{{/if}}{{#if isAccentLight}} AccentLight{{/if}}">
<div class="latest__head">
<div class="latest__title">
{{> @title-l title }}
</div>
{{#if description}}
<div class="latest__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
{{#if link}}
<div class="latest__link">
{{> @link link }}
</div>
{{/if}}
</div>
<div class="latest__cards" data-number-of-visible-elements="{{data-number}}">
{{#if isThreeCols}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-4 col-lg-4 col latest__cards__item">
{{> @card card }}
</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 latest__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else}}
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col latest__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
{{/if}}
{{#if moreItems}}
<div class="latest__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>
{{else if isPagination}}
<div class="latest__pagination">
{{ render '@pagination' }}
</div>
{{else if bottom-link}}
<div class="latest__bottom-link">
{{> @link bottom-link }}
</div>
{{else if bottom-btn}}
<div class="latest__bottom-btn">
{{> @btn bottom-btn }}
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"data-number": "all",
"title": {
"text": "Productos que se adaptan a tus necesidades"
},
"description": {
"text": "Todos los artículos por fecha de publicación"
},
"link": {
"href": "#",
"text": "Ver todos los productos"
},
"item": [
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": false
}
}
]
}
.latest {
&__head {
margin-bottom: 10px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
.latest__description {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.latest__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.latest__title {
margin-bottom: 20px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
}
&__cards {
.card {
margin-top: 30px;
padding-bottom:30px;
@media (--viewport-sm-min) {
margin-top: 0;
}
@media (--viewport-ms-max) {
margin-top: 15px;
}
&.accentBG{
margin-bottom:30px;
padding-bottom:0;
}
}
}
&.AccentLight{background-color: var(--color-accent-light); padding: 40px;
}
.latest__link,
.latest__bottom-link,
.latest__bottom-btn {
text-align: center;
}
.latest__pagination .pagination .pagination__list {
justify-content: center;
}
/* ESTILOS PARA QUE NO HAYA ERRORES EN VIEJAS INSTANCIAS DEL LATEST (CA) */
&__list {
margin-bottom: -30px;
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__item {
height: 100%;
margin-bottom: 30px;
}
&__footer {
margin-top: 30px;
text-align: center;
}
}
Variantes: Default, For category tag