<section class="splitter splitter_bg-color_white splitter_padding_bottom_large splitter_header-before ">
<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="steps-form-result">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="col1">
<div class="tit-group">
<h1 class="
title-xl
"><span>María,</span><br />¡tienes una hipoteca como una casa!</h1>
<img class="emoji" src="/dist/images/casita.png" alt="emoji">
</div>
<div class="tit-link"> <a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Descargar mi resultado en PDF</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="col2">
<div class="resultado">
<h1 class="
title-xl
"><span>suma</span><br />a tipo fijo</h1>
</div>
<div class="
bodycopy-m
">
<p>Con la hipoteca para comprar y reformar pon tu nueva casa guapa sin esperar a tener los ahorros necesarios. La hipoteca que le sienta bien a tu casa y a ti también.</p>
</div>
<ul>
<li> <a class="btn
btn_secondary
" href="#" id="">
Descubre Hipoteca SUMA
</a>
</li>
<li> <a class="btn
" href="#" id="">
Solicita + info
</a>
</li>
</ul>
</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="steps-form-result">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="col1">
<div class="tit-group">{{> @title-xl titulo }} <img class="emoji" src="{{ src-emoji }}" alt="emoji"></div>
<div class="tit-link">{{> @link link }}</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="col2">
<div class="resultado">{{> @title-xl resultado }}</div>
{{> @bodycopy-m parrafo }}
<ul>
<li>{{> @btn btn }}</li>
<li>{{> @btn btn2 }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"isHeaderBefore": true,
"paddingBottomLarge": true
},
"titulo": {
"text": "<span>María,</span><br />¡tienes una hipoteca como una casa!"
},
"link": {
"href": "#",
"text": "Descargar mi resultado en PDF",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"resultado": {
"text": "<span>suma</span><br />a tipo fijo"
},
"parrafo": {
"text": "<p>Con la hipoteca para comprar y reformar pon tu nueva casa guapa sin esperar a tener los ahorros necesarios. La hipoteca que le sienta bien a tu casa y a ti también.</p>"
},
"src-emoji": "/dist/images/casita.png",
"btn": {
"isSecondary": true,
"href": "#",
"text": "Descubre Hipoteca SUMA"
},
"btn2": {
"text": "Solicita + info",
"href": "#"
}
}
.steps-form-result {
.col1{
.tit-group{margin-bottom: 20px;
.title-xl{
display:inline;
span{color:var(--color-accent);}
}
img{width: 45px;display:inline;margin:-10px 0 0 10px;}
}
.tit-link{margin-bottom: 40px;
.link{color:var(--color-accent);
span{color:var(--color-accent);
&:after{background-color:var(--color-accent-dark);}
}
}
}
}
.col2{
.resultado{
background-color: var(--color-accent-light);
.title-xl{
padding: 45px 0;
text-align: center;
span{color:var(--color-accent);font-weight:bold;text-transform:uppercase;}
}
}
p{padding:20px 0;}
ul{display: flex; align-items: flex-start; justify-content: flex-start;
@media (--viewport-xs-max){display:block;}
li{width:auto;display:inline-block;
@media (--viewport-xs-max){width: 100%;display:block;
a{display:block; width: 100%;}
}
&:first-child{margin-right:50px;
@media (--viewport-sm-max){margin-right: 10px;}
@media (--viewport-xs-max){margin-right:0;margin-bottom:15px;}
}
}
}
}
}
Permite configurar el src del emoji.