<div class="lightbox-content-generic">
<div class="modal-body">
<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<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="cards-grid alignLeft">
<div class="cards-grid__head">
<div class="cards-grid__title">
<h2 class="
title-l
">
Añade tu Nómina 1
</h2>
</div>
</div>
<div class="cards-grid__cards" data-number-of-visible-elements="2">
<div class="cards-grid__wrap">
<ul class="cards-grid__cards__items">
<li class="cards-grid__cards__item">
<div class="card noBG hasIcon upload-lightbox">
<div class="card__icon small">
<img src="/dist/images/informacionpersonal.svg" class="icon" alt="Icon" />
</div>
<div class="card__content">
<div class="card__title">
<div class="
bodycopy-m
">
<a href='#'>Carga el archivo</a> o arrástralo sobre el cuadro
</div>
</div>
<div class="card__clarification">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>¿No sabes cómo? Sigue estos consejos:</span>
<svg class="icon icon-16_chevron-up icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-up"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="cards-grid__cards__item">
<div class="card noBG upload-lightbox upload-lightbox-multiple">
<div class="card__content">
<div class="card__title">
<div class="wrap">
<h3 class="
title-m
">6 fotos incluídas</h3>
<span class="bodycopy-xs">6 fotos incluídas</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div><svg class="icon icon-camera-on ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#camera-on"></use>
</svg>
</div>
<div class="card__multiple-photos">
<ul>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Slider/Slider-Highlight_Desktop.jpg?h=1250&iar=0&w=2628&hash=44E539B63B7332C0FD1DF80F9CED7E31" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/Product.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="wrap-icon"><svg class="icon icon-16_feedback-success ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_feedback-success"></use>
</svg>
</span>
<span class="wrap-icon-right"><svg class="icon icon-16_trash ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_trash"></use>
</svg>
</span>
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Home/SUMA-II.jpg" alt="Imagen alt">
<span class="bodycopy-xs">Nombre del archivo con ellipsis</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="lightbox-content-generic">
<div class="modal-body">
{{#if img-url}}
<div class="row">
<div class="col-xs-12 col-ms-12">
<img src="{{img-url}}" />
</div>
</div>
{{/if}}
{{#if splitter}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
{{#if isDocumentsUploadLightbox}}
{{ render '@cards-grid--upload-multiple-photos' }}
{{else if isSolicitudLlamadaLightbox}}
{{ render '@contact--two-items-without-title' }}
{{ render '@call-form--default' }}
{{else if isSolicitudLlamadaSimpleLightbox}}
{{ render '@call-form--con-consultor-y-encabezado-a-la-izquierda' }}
{{else if isSolicitudLlamadaSuccessLightbox}}
{{ render '@form-success' }}
{{else if isBankflipLightbox}}
{{ render '@product--with-bullets-list-and-reversed-just-for-mobile' }}
{{else if isDeleteDocumentLightbox}}
{{ render '@delete-document--default' }}
{{else if isPreloader}}
{{ render '@preloader--as-component' }}
{{else if isRequisitosICO}}
{{ render '@description-list--text-list' }}
{{else}}
Contenido splitter
{{/if}}
{{/content}}
{{/extend}}
{{/if}}
</div>
</div>
{
"hasID": false,
"img-url": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"isDocumentsUploadLightbox": true
}
.lightbox-content-generic {
.modal-body {
/*.row {
background-color: var(--color-white); Lo comento porque genera error al meter dentro del splitter un componente producto, por ejemplo (CA)
}*/
.splitter{
.container{
padding:0;
}
}
& > .row{
margin: 0;
}
& > .row > .col-xs-12,
& > .row > .col-ms-12{
padding: 0;
}
}
.modal-head {
margin-bottom: var(--gutter-width);
& > .row{
margin: 0;
}
& > .row > .col-xs-12,
& > .row > .col-ms-12{
padding: 0;
}
}
.modal__title {
&.small {
margin-bottom: 20px;
.title-m {
color: var(--color-secondary);
}
}
}
}
El título, descripción, imagen y texto bajo la imagen son opcionales