<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-blog">
<div class="row">
<div class="col-xs-12 col-ms-6 col-ms-mr-ml col">
<div class="access-blog__header">
<div class="access-blog__title">
<h2 class="
title-l
">
Para tomar buenas decisiones hay que tener la información adecuada
</h2>
</div>
<div class="access-blog__link">
<a class="link
" href="#">
<span>Descubre nuestro blog</span>
</a>
</div>
</div>
</div>
</div>
<div class="access-blog__image lazyload" data-bg="/dist/images/access-highlight-bg-tab.jpg 1023px, /dist/images/access-highlight-bg-lap.jpg 1279px, /dist/images/access-highlight-bg.jpg">
<div class="row end-ms access-blog__nav-desktop-wrapper">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__nav between-xs end-ms">
<div class="access-blog__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="access-blog__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 class="row">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__tiles">
<div class="row access-blog-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="access-blog__tile">
<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
">Título corto</h3>
</a>
</div>
<div class="card__category">
<a href="#" class="card__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>ESCUELA DE HIPOTECAS</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="access-blog__tile">
<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
">¿Cómo puede afectar el Brexit en el mercado inmobiliario español?</h3>
</a>
</div>
<div class="card__category">
<a href="#" class="card__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>ACTUALIDAD DE HIPOTECAS</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="access-blog__tile">
<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
">Living coral: atrévete a decorar tu casa con el color de moda de este 2019 y más texto para hacerlo más largo</h3>
</a>
</div>
<div class="card__category">
<a href="#" class="card__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>ESCUELA DE HIPOTECAS</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="access-blog__tile">
<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
">Título corto</h3>
</a>
</div>
<div class="card__category">
<a href="#" class="card__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>ACTUALIDAD DE HIPOTECAS</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="access-blog__tile">
<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
">U-Build, la innovadora tendencia de construcción modular con bajo coste</h3>
</a>
</div>
<div class="card__category">
<a href="#" class="card__category-link">
<div class="
text-label-s
text-label-s_color_accent
"><span>ACTUALIDAD DE HIPOTECAS</span></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row end-ms access-blog__nav-mobile-wrapper">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__nav between-xs end-ms">
<div class="access-blog__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="access-blog__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 class="access-blog__image-mobile lazyload" data-bg="/dist/images/access-highlight-bg-mob.jpg 767px"></div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="access-blog" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="row">
<div class="col-xs-12 col-ms-6 col-ms-mr-ml col">
<div class="access-blog__header">
<div class="access-blog__title">
{{> @title-l title }}
</div>
<div class="access-blog__link">
{{> @link link }}
</div>
</div>
</div>
</div>
<div class="access-blog__image lazyload" data-bg="/dist/images/access-highlight-bg-tab.jpg 1023px, /dist/images/access-highlight-bg-lap.jpg 1279px, /dist/images/access-highlight-bg.jpg">
<div class="row end-ms access-blog__nav-desktop-wrapper">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__nav between-xs end-ms">
<div class="access-blog__nav-back nav-back">
{{ render '@nav-arrow--back-small' }}
</div>
<div class="access-blog__nav-forward nav-forward">
{{ render '@nav-arrow--forward-small' }}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__tiles">
<div class="row access-blog-swiper">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each latest}}
<div class="swiper-slide">
<div class="access-blog__tile">
{{> @card this.card }}
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row end-ms access-blog__nav-mobile-wrapper">
<div class="col-xs-12 col-ms-8 col-ms-offset-4 col">
<div class="access-blog__nav between-xs end-ms">
<div class="access-blog__nav-back nav-back">
{{ render '@nav-arrow--back-small' }}
</div>
<div class="access-blog__nav-forward nav-forward">
{{ render '@nav-arrow--forward-small' }}
</div>
</div>
</div>
</div>
</div>
<div class="access-blog__image-mobile lazyload" data-bg="/dist/images/access-highlight-bg-mob.jpg 767px"></div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"idComponent": "",
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Para tomar buenas decisiones hay que tener la información adecuada"
},
"link": {
"href": "#",
"text": "Descubre nuestro blog"
},
"latest": [
{
"card": {
"href": "#",
"hasImage": false,
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "Título corto"
},
"category-href": "#",
"category": {
"text": "ESCUELA DE HIPOTECAS",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"hasImage": false,
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "¿Cómo puede afectar el Brexit en el mercado inmobiliario español?"
},
"category-href": "#",
"category": {
"text": "ACTUALIDAD DE HIPOTECAS",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"hasImage": false,
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "Living coral: atrévete a decorar tu casa con el color de moda de este 2019 y más texto para hacerlo más largo"
},
"category-href": "#",
"category": {
"text": "ESCUELA DE HIPOTECAS",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"hasImage": false,
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "Título corto"
},
"category-href": "#",
"category": {
"text": "ACTUALIDAD DE HIPOTECAS",
"colorAccent": true
}
}
},
{
"card": {
"href": "#",
"hasImage": false,
"src": "/dist/images/featured.jpg",
"alt": "A cover for news",
"label": {
"text": "12 SEP 2020"
},
"title": {
"text": "U-Build, la innovadora tendencia de construcción modular con bajo coste"
},
"category-href": "#",
"category": {
"text": "ACTUALIDAD DE HIPOTECAS",
"colorAccent": true
}
}
}
]
}
.access-blog {
@media (--viewport-sm-max) {
padding-left: 10px;
padding-right: 10px;
}
&__header {
margin-bottom: 30px;
}
&__title {
margin-bottom: 20px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
&__link {
text-align: center;
}
&__image {
padding-top: 30px;
@media (--viewport-xs-max) {
background-image: none !important;
}
@media (--viewport-ms-min) {
padding-top: 140px;
min-height: 400px;
background-size: 75%;
background-repeat: no-repeat;
}
@media (--viewport-md-min) {
background-size: 50%;
}
&-mobile {
margin-left: -30px;
margin-right: -29px;
min-height: 220px;
background-size: 100%;
background-repeat: no-repeat;
background-position: 0;
margin-top: -40px;
position: relative;
z-index: 1;
@media (--viewport-ms-min) {
display: none;
}
}
}
&__nav {
display: flex;
@media (--viewport-xs-max) {
justify-content: space-between;
padding: 0 20px;
&-desktop-wrapper {
display: none;
}
&-mobile-wrapper {
background-color: var(--color-accent-light);
position: relative;
z-index: 2;
}
&-back,
&-forward {
margin-bottom: 30px;
}
}
&-desktop-wrapper {
@media (--viewport-lg-min) {
position: relative;
left: -15px;
}
}
@media (--viewport-ms-min) {
margin-bottom: 30px;
&-mobile-wrapper {
display: none;
}
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
&__tiles {
@media (--viewport-md-min) {
position: relative;
left: -15px;
}
@media (--viewport-lg-min) {
left: -35px;
}
.access-blog-swiper {
@media (--viewport-xs-max) {
background-color: var(--color-accent-light);
}
}
.swiper-slide {
background-color: var(--color-accent-light);
}
}
&__tile {
.card__content {
@media (--viewport-ms-min) {
min-height: 297px;
}
}
}
}
Módulo integrado como parte del código: AccessBlog.cshtmlhttps://dev.azure.com/Uci-EcowebDevops/ecoweb-app/_git/ecoweb-app?version=GBdevelop&path=/Feature/Ecoweb.Sc.Feature.Blog/Code/Views/Feature/Blog/AccessBlog.cshtml