<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="cards-grid">
<div class="cards-grid__head">
<div class="cards-grid__title">
<h1 class="
title-l
">
Productos que se adaptan a tus necesidades
</h1>
</div>
<div class="cards-grid__description">
<div class="
bodycopy-m
">
Todos los artÃculos por fecha de publicación
</div>
</div>
<div class="cards-grid__link">
<a class="link
" href="#">
<span>Ver todos los productos</span>
</a>
</div>
</div>
<div class="cards-grid__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 cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__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">
<h2 class="
title-m
">6 Consejos para aumentar el valor de la vivienda</h2>
</a>
</div>
<div class="card__reference">
<div class="text-label-m text-label-m_color_accent">Reference</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col cards-grid__cards__item">
<div class="card accentBG hasIcon">
<div class="card__icon">
<img src="/dist/images/libro.svg" class="icon" alt="Icon" />
</div>
<div class="card__content">
<div class="card__label">
<div class="text-label-m">Kit de prensa</div>
</div>
<div class="card__title">
<a href="" class="card__title-link">
<h2 class="
title-l
">
Descarga el kit de prensa
</h2>
</a>
</div>
<div class="card__btn">
<a class="btn
" href="#" id="">
<svg class="icon icon-download icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
Kit de prensa
</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="cards-grid{{#if isFourCols}} fourcols{{/if}}{{#if isAccentLight}} AccentLight{{/if}}{{#if isTwoColsWide}} alignLeft{{/if}}{{#if isOneColWide}} alignLeft{{/if}}{{#if isOutOfGrid}} alignLeft{{/if}}">
<div class="cards-grid__head">
<div class="cards-grid__title">
{{> @title-l title }}
</div>
{{#if description}}
<div class="cards-grid__description">
{{> @bodycopy-m description }}
</div>
{{/if}}
{{#if link}}
<div class="cards-grid__link">
{{> @link link }}
</div>
{{/if}}
</div>
<div class="cards-grid__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 cards-grid__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 cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else isTwoColsWide}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 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 cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
</div>
{{else isOutOfGrid}}
<div class="cards-grid__wrap">
<ul class="cards-grid__cards__items">
{{#each item}}
<li class="cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
</div>
{{else isOneColWide}}
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col col-ms-mr-ml">
<ul class="row">
{{#each item}}
<li class="col-xs-12 col-ms-12col-sm-12 col-lg-12 col cards-grid__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 cards-grid__cards__item">
{{> @card card }}
</li>
{{/each}}
</ul>
{{/if}}
{{#if moreItems}}
<div class="cards-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>
{{else if isPagination}}
<div class="cards-list__pagination">
{{ render '@pagination' }}
</div>
{{else if bottom-link}}
<div class="cards-list__bottom-link">
{{> @link bottom-link }}
</div>
{{else if bottom-btn}}
<div class="cards-list__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",
"isH1": true
},
"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": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"isH2": true,
"text": "6 Consejos para aumentar el valor de la vivienda"
},
"reference": {
"text": "Reference",
"colorAccent": true
}
}
},
{
"card": {
"label": {
"text": "Kit de prensa"
},
"title": {
"isH2": true,
"text": "Descarga el kit de prensa"
},
"isAccentBG": true,
"ifTitleL": true,
"hasIcon": true,
"src": "/dist/images/libro.svg",
"alt": "Icon",
"secondary-link": false,
"btn": {
"href": "#",
"text": "Kit de prensa",
"icon-before": {
"name": "download",
"isBefore": true
}
}
}
}
]
}
.cards-grid {
&__head {
margin-bottom: 10px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
.cards-grid__description {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.cards-grid__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
.cards-grid__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;
}
&.upload {
margin-bottom: initial;
padding-bottom: 40px;
}
}
}
&.AccentLight {
background-color: var(--color-accent-light);
padding: 40px;
.cards-grid__cards .card {
padding-bottom: 0;
}
}
.cards-list__link,
.cards-list__bottom-link,
.cards-list__bottom-btn {
text-align: center;
}
.cards-list__pagination .pagination .pagination__list {
justify-content: center;
}
&.alignLeft {
.cards-grid__title,
.cards-list__bottom-link {
text-align: left;
}
.cards-grid__head {
margin-bottom: 40px;
}
}
&__wrap {
.cards-grid__cards__items {
display: flex;
gap: 32px;
width: 100%;
@media (--viewport-ms-max) {
flex-direction: column;
}
.cards-grid__cards__item {
width: 50%;
@media (--viewport-ms-max) {
width: 100%;
}
}
}
}
/* 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