<section class="splitter splitter_bg-color_white 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="hero-dashboard">
<div class="row hero-dashboard__content auxiliary">
<div class="wrap-img lazyload bottomless">
<picture>
<source srcset="/dist/images/consultan-xs-375.png" media="(max-width:767px)" />
<source srcset="/dist/images/consultan-ms-768.png" media="(max-width:1023px)" />
<source srcset="/dist/images/consultan-sm-1024.png" media="(max-width:1279px)" />
<source srcset="/dist/images/consultan-lg-1279.png" media="(max-width:1679px)" />
<img src="/dist/images/consultan-lg-1279.png" />
</picture>
</div>
<div class="hero-dashboard__inner auxiliary">
<div class="hero-dashboard__title">
<span class="title-L
">Tu consultor financiero</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="hero-dashboard" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="row hero-dashboard__content {{#if auxiliary}}auxiliary{{/if}}">
<div class="wrap-img lazyload {{#if auxiliary}}bottomless{{/if}}">
<picture>
<source srcset="{{ srcXs }}" media="(max-width:767px)" />
<source srcset="{{ srcMs }}" media="(max-width:1023px)" />
<source srcset="{{ srcSm }}" media="(max-width:1279px)" />
<source srcset="{{ srcLg }}" media="(max-width:1679px)" />
<img src="{{srcLg}}" />
</picture>
</div>
<div class="hero-dashboard__inner{{#if auxiliary}} auxiliary{{else}} col-xs-12 col-ms-10 col-sm-10 col-lg-10 col{{/if}}">
{{#if dashboardTitle}}
<div class="hero-dashboard__inner__title">
{{> '@icon' icon-home}}
{{> @text-label-m text-label-m }}
{{> @title-l title }}
</div>
{{/if}}
{{#if tileFigurePrice}}
{{render '@tile-figure-price' }}
{{/if}}
{{#if dashboardDetails}}
<span class="border"></span>
<ul class="hero-dashboard__details">
{{#each details}}
<li class="item">
{{> '@icon' icon}}<span class="bodycopy-s">{{this.text}}</span>{{#if link}}{{> '@link' link}}{{/if}}</li>
{{/each}}
</ul>
{{/if}}
{{#if onlyTitle}}
<div class="hero-dashboard__title">
{{> @title--title-l titleVariant }}
</div>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"dashboardTitle": false,
"tileFigurePrice": false,
"dashboardDetails": false,
"onlyTitle": true,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"srcLg": "/dist/images/consultan-lg-1279.png",
"srcXs": "/dist/images/consultan-xs-375.png",
"icon-home": {
"name": "home",
"isBig": false
},
"text-label-m": {
"text": "Resumen solicitud",
"colorAccent": true
},
"title": {
"text": "Hola <span>%name%</span>, esta es tu solicitud %#000000%"
},
"details": [
{
"icon": {
"name": "16_calendar"
},
"text": "35 años"
},
{
"icon": {
"name": "16_users"
},
"text": "1 titular",
"link": {
"text": "Añadir otro titular",
"href": "#",
"isSecondary": true
}
},
{
"icon": {
"name": "16_map-pin"
},
"text": "Barcelona"
},
{
"icon": {
"name": "16_home"
},
"text": "Vivienda habitual/2º mano"
},
{
"icon": {
"name": "16_savings"
},
"text-icon": "Ahorro necesario",
"text": "68.000 €"
}
],
"auxiliary": true,
"titleVariant": {
"type": "-L",
"text": "Tu consultor financiero"
},
"srcMs": "/dist/images/consultan-ms-768.png",
"srcSm": "/dist/images/consultan-sm-1024.png"
}
.hero-dashboard {
position:relative;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
&__content {
display:flex;
justify-content: center;
@media (--viewport-ms-min) {
margin: 0;
}
.wrap-img{
line-height: 0;
width: 100%;
picture{
img{
max-width: 100%;
width: 100%;
@media (--viewport-xs-max) {
max-width: none;
margin-left: -10px;
margin-right: -10px;
width: calc(100% + 20px);
min-height: 324px;
}
}
}
}
&.auxiliary {
width: 100%;
height:160px;
min-height: auto;
@media (--viewport-xs-max) {
height:120px;
}
.wrap-img{
width: 100%;
height:160px;
@media (--viewport-xs-max) {
height:120px;
}
picture{
img{
object-fit: cover;
min-width: 100%;
height:160px;
@media (--viewport-xs-max) {
height:120px;
min-height: auto;
}
}
}
}
}
.wrap-img.bottomless{
& + .hero-dashboard {
&__inner {
background: transparent;
border:0 none;
align-items: flex-end;
justify-content:flex-end;
top:auto;
bottom:var(--gutter-md-vertical);
left: var(--gutter-lg-vertical);
padding:0;
margin-bottom:0;
@media (--viewport-ms-max) {
bottom:60px;
left: 40px;
}
@media (--viewport-xs-max) {
bottom:50px;
left: 10px;
}
.hero-dashboard__title {
width: 100%;
display:flex;
flex-flow: column;
justify-content:flex-start;
align-items: flex-start;
@media (--viewport-ms-max) {
}
@media (--viewport-xs-max) {
}
[class^="title-"], [class*="title-"] {
color: var(--color-white);
}
}
}
}
}
}
&__inner {
border: 1px solid var(--color-grey3);
position: relative;
width: 100%;
display:flex;
flex-flow: column;
justify-content:flex-start;
align-items: flex-start;
background: var(--color-white);
padding:40px 80px;
row-gap: 40px;
margin-bottom: 40px;
margin-top: -310px;
@media (--viewport-sm-max) {
margin-top: -213px;
}
@media (--viewport-ms-max) {
padding:29px 40px 33px;
margin-top: -143px;
}
@media (--viewport-xs-max) {
padding:32px 20px 30px;
margin-top: -285px;
}
&__title {
display: flex;
flex-flow: column;
row-gap: 20px;
@media (--viewport-xs-max) {
row-gap:10px;
}
}
.icon-home {
height: 60px;
width: 60px;
@media (--viewport-xs-max) {
display:none;
}
}
.title-m {
span {
font-weight:700;
}
}
&.auxiliary{
position: absolute;
top: 90px;
left:auto;
margin-top: 0;
@media (--viewport-ms-max) {
top:80px;
}
@media (--viewport-xs-max) {
top:40px;
}
}
}
.border {
border: 1px solid var(--color-quinary);
width:100%;
}
&__details {
display: flex;
flex-flow: nowrap;
justify-content: flex-start;
align-items: center;
width:100%;
column-gap: var(--gutter-width-ms-min);
row-gap: 30px;
@media (--viewport-sm-max) {
display: flex;
flex-wrap: wrap;
}
@media (--viewport-ms-max) {
align-items: flex-start;
}
@media (--viewport-xs-max) {
flex-flow: column;
align-items: flex-start;
row-gap: 10px;
}
.item {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
@media (--viewport-ms-max) {
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
row-gap: 5px;
}
@media (--viewport-xs-max) {
flex-flow: wrap;
justify-content: flex-start;
align-items: center;
}
span {
&.label-m {
color:var(--color-grey2);
}
}
.link{
margin-left: 8px;
@media (--viewport-ms-only) {
margin-left: 0;
}
}
}
}
}
No notes defined.