<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-simulator lazyload" data-bg="/dist/images/access-simulator-bg-mob.jpg 767px, /dist/images/access-simulator-bg-tab.jpg 1023px, /dist/images/access-simulator-bg.jpg">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="access-simulator__tiles">
<ul class="row">
<li class="col-xs-12 col-ms-12 col col-sm-6 col-lg-6">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href=""> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a simulator">
</div>
<div class="tile__label">
<div class="text-label-m">calcula cuanto puedes pedir</div>
</div>
<div class="tile__title">
<h2 class="
title-m
">¿Cuánto me puedo gastar en la compra de una casa?</h2>
</div>
<div class="tile__btn">
<a class="btn
" href="#" id="">
Iniciar simulador cuánto puedes pedir
</a>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
<li class="col-xs-12 col-ms-12 col col-sm-6 col-lg-6">
<div class="
tile tile_bg-color_yellow
">
<!-- ==== <a class="tile__link" href=""> ==== No debe ir un enlace envolviendo elementos de bloque -->
<div class="tile__content">
<div class="tile__pic">
<img class="tile__img" src="/dist/images/casa-reforma.svg" alt="An icon for a simulator">
</div>
<div class="tile__label">
<div class="text-label-m">calcula cuanto puedes pedir</div>
</div>
<div class="tile__title">
<h2 class="
title-m
">¿Cuánto me puedo gastar en la compra de una casa?</h2>
</div>
<div class="tile__btn">
<a class="btn
" href="#" id="">
Iniciar simulador cuánto puedes pedir
</a>
</div>
</div>
<!-- ==== </a> ==== -->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="access-simulator lazyload" data-bg="/dist/images/access-simulator-bg-mob.jpg 767px, /dist/images/access-simulator-bg-tab.jpg 1023px, /dist/images/access-simulator-bg.jpg">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="access-simulator__tiles">
<ul class="row">
<li class="col-xs-12 col-ms-12 col{{#if isCol5}} col-sm-4 col-lg-4{{else}} col-sm-6 col-lg-6{{/if}}">
{{> @tile tile }}
</li>
<li class="col-xs-12 col-ms-12 col{{#if isCol5}} col-sm-4 col-lg-4 col-sm-offset-1{{else}} col-sm-6 col-lg-6{{/if}}">
{{> @tile tile }}
</li>
</ul>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"tile": {
"isYellow": true,
"src": "/dist/images/casa-reforma.svg",
"alt": "An icon for a simulator",
"text-label": {
"text": "calcula cuanto puedes pedir"
},
"title": {
"text": "¿Cuánto me puedo gastar en la compra de una casa?",
"isH2": true
},
"btn": {
"href": "#",
"text": "Iniciar simulador cuánto puedes pedir"
}
}
}
.access-simulator {
padding: 50px 0 80px;
background: center / cover no-repeat;
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -19px;
}
@media (--viewport-sm-min) {
padding: 70px 0 100px;
}
&__tiles {
ul{justify-content: center;}
@media (--viewport-xs-max) {
padding: 0 20px;
}
.tile {
padding: 60px;
margin-top: 30px;
@media (--viewport-sm-min) {
padding: 60px 20px;
}
@media (--viewport-md-min) {
padding: 60px 40px;
}
&__content {
padding: 0;
justify-content: center;
}
&__title {
margin-bottom: 30px;
}
&__btn {
@media (--viewport-ms-min) {
position:relative;bottom:auto;
}
}
}
}
}
Default, Five Cols, For UCIPt