<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 ">
<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="product-swiper">
<div id="swiperID" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product " id=product>
<div class="row mobileReverse ">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__label">
<div class="text-label-m"></div>
</div>
<div class="product__title">
<h1 class="
title-l
">
Sobre Bankflip
</h1>
</div>
<div class="product__bodycopy">
<div class="
bodycopy-m
">
<p>Lorem ipsum dhoncus morbi et augue nec, in id ullamcorper at sit. Condimentum sit nunc in eros scelerisque sed. Commodo in viverra nunc, ullamcorper ut. </p>
</div>
</div>
<div class="product__bulletList">
<ul>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<div class="
bodycopy-m
">
Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
</div>
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<div class="
bodycopy-m
">
Id eros pellentesque facilisi id mollis faucibus commodo enim.
</div>
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<div class="
bodycopy-m
">
Egestas elit dui scelerisque ut eu purus aliquam vitae habitasse.
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<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="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<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>
</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
},
"isBankflipLightbox": 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