<section class="splitter splitter_bg-color_white splitter_padding_top_40-60 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="featured-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="featured">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7">
<div class="featured__pic">
<a href="#" class="featured__pic-link" title="Featured blog cover" style="background-image:url(/dist/images/featured.jpg)">
</a>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-5 center-sm col-lg-5">
<div class="featured__main">
<div class="featured__content">
<div class="featured__label">
<div class="text-label-m">12 SEP 2020</div>
</div>
<div class="featured__title">
<a href="#" class="featured__title-link">
<h2 class="
title-xl
">Decoración del hogar: ¿Te apuntas a un viaje decorativo por el mundo?</h2>
</a>
</div>
<div class="featured__category">
<a href="#" class="featured__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>TU CASA Y TÚ</span></div>
</a>
</div>
</div>
<div class="featured__nav">
<div class="featured__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<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="featured__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<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>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="featured">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7">
<div class="featured__pic">
<a href="#" class="featured__pic-link" title="Featured blog cover" style="background-image:url(/dist/images/featured.jpg)">
</a>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-5 center-sm col-lg-5">
<div class="featured__main">
<div class="featured__content">
<div class="featured__label">
<div class="text-label-m">12 SEP 2022</div>
</div>
<div class="featured__title">
<a href="#" class="featured__title-link">
<h2 class="
title-xl
">2 Decoración del hogar: ¿Te apuntas a un viaje decorativo por el mundo?</h2>
</a>
</div>
<div class="featured__category">
<a href="#" class="featured__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>2 TU CASA Y TÚ</span></div>
</a>
</div>
</div>
<div class="featured__nav">
<div class="featured__nav-back nav-back">
<div class="
nav-arrow
nav-arrow_small
">
<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="featured__nav-forward nav-forward">
<div class="
nav-arrow
nav-arrow_small
">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="featured-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each featured}}
<div class="swiper-slide">
<div class="featured">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7">
<div class="featured__pic">
<a
href="{{ this.href }}"
class="featured__pic-link"
title="{{ this.alt }}"
style="background-image:url({{ this.src }})"
>
</a>
</div>
</div>
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-5 center-sm col-lg-5">
<div class="featured__main">
<div class="featured__content">
<div class="featured__label">
{{> @text-label-m this.label }}
</div>
<div class="featured__title">
<a href="{{ this.href }}" class="featured__title-link">
{{> @title-xl this.title }}
</a>
</div>
<div class="featured__category">
<a href="{{ this.category-href }}" class="featured__category-link">
{{> @text-label-s this.category }}
</a>
</div>
</div>
<div class="featured__nav">
<div class="featured__nav-back nav-back">
{{ render '@nav-arrow--back-small' }}
</div>
<div class="featured__nav-forward nav-forward">
{{ render '@nav-arrow--forward-small' }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTop4060": true,
"paddingBottomLarge": true
},
"featured": [
{
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "Featured blog cover",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "Decoración del hogar: ¿Te apuntas a un viaje decorativo por el mundo?",
"isH2": true
},
"category-href": "#",
"category": {
"text": "TU CASA Y TÚ",
"colorAccent": true
}
},
{
"href": "#",
"src": "/dist/images/featured.jpg",
"alt": "Featured blog cover",
"label": {
"text": "12 SEP 2022"
},
"title": {
"text": "2 Decoración del hogar: ¿Te apuntas a un viaje decorativo por el mundo?",
"isH2": true
},
"category-href": "#",
"category": {
"text": "2 TU CASA Y TÚ",
"colorAccent": true
}
}
]
}
.featured {
&-swiper {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__pic {
overflow: hidden;
&-link {
display: block;
width: 100%;
height: 220px;
background: center / cover no-repeat;
transition: all 0.5s;
@media (--viewport-ms-min) {
height: 320px;
}
@media (--viewport-sm-min) {
height: 420px;
}
&:hover,
&:focus {
transform: scale(1.1);
}
}
}
&__main {
@media (--viewport-sm-min) {
padding-left: 30px;
}
}
&__content {
@media (--viewport-xs-max) {
padding: 40px 20px 0;
}
@media (--viewport-ms-only) {
padding: 40px 0 0;
}
}
&__label {
margin-bottom: 10px;
}
&__title {
&-link {
display: block;
color: var(--color-primary-brand);
&:hover,
&:focus {
.title-xl {
color: var(--color-accent);
}
}
.title-xl {
transition: color 0.3s;
}
}
}
&__category {
margin-top: 20px;
&-link {
display: block;
&:hover,
&:focus {
.text-label-s {
color: var(--color-accent-dark-tertiary);
}
}
.text-label-s {
color: var(--color-txt-cuaternary);
transition: color 0.3s;
}
}
}
&__nav {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
padding: 0 20px;
}
&-back,
&-forward {
margin-top: 30px;
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
}
Se pueden configurar enlace y src y alt de la imagen