<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="banner" id="product">
<div class="row banner__wrapper overhead" ">
<div class=" col-xs-12 col-ms-12 col-sm-4 col-lg-4 banner__support lazyload overhead " data-bg=" /dist/images/example-banner.png">
</div>
<div class="banner__content col-xs-10 overhead bg-color_torch-red">
<div class="banner__title">
<span class="title-l
">Title (optional) up to 100 characters lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="banner__bodycopy">
<div class="
bodycopy-m
">
<p>Text (optional) up to 200 characters lorem ipsum dolor sit amet, consectetur adipiscing elit ut labore. Duis aute sunt in culpa qui officia deserunt id est t <a href='#' class='link link_simple'><span>link inline (optional)</span></a> laborum ut enim ad minim.</p>
</div>
</div>
<div class="middle-xs banner__toolbar">
<div class="banner__btn">
<a class="btn
" href="#" id="">
Comprar casa
</a>
</div>
<div class="banner__link">
<a class="link
link_color_light
" href="#">
<span>Ver más</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="banner{{#if isReversed}} banner_reversed{{/if}}" id="{{ id }}">
<div class="row banner__wrapper{{#if overhead}} overhead{{else}}{{#if torchRed}} bg-color_torch-red{{else if eggplant}} bg-color_eggplant{{else}} bg-color_bridesmade{{/if}}{{/if}}"
{{#if isReversed}} reverse {{/if}}{{#if isMobileReversed}} mobileReverse {{/if}}">
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 banner__support lazyload {{#if overhead}} overhead {{/if}}" data-bg="{{ data-img }}">
</div>
<div class="banner__content{{#if overhead}} col-xs-10 overhead{{else}} col-xs-12 col-ms-12 col-sm-8 col-lg-8{{/if}}{{#if torchRed}} bg-color_torch-red{{else if eggplant}} bg-color_eggplant{{else}} bg-color_bridesmade{{/if}}">
{{#if hasTitle}}
<div class="banner__title">
{{> @title title }}
</div>
{{/if}}
{{#if hasText}}
<div class="banner__bodycopy">
{{> @bodycopy-m bodycopy }}
</div>
{{/if}}
{{#if hasRow}}
<div class="middle-xs banner__toolbar">
{{#if hasBtn}}
<div class="banner__btn">
{{> @btn btn }}
</div>
{{/if}}
{{#if hasLink}}
<div class="banner__link">
{{> @link bannerLink }}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"id": "product",
"overhead": true,
"data-img": "/dist/images/example-banner.png",
"alt": "Product",
"hasBtn": true,
"hasLink": true,
"bannerLink": {
"href": "#",
"text": "Ver más",
"isLight": true
},
"hasTitle": true,
"hasText": true,
"hasRow": true,
"btn": {
"href": "#",
"text": "Comprar casa"
},
"title": {
"type": "-l",
"text": "Title (optional) up to 100 characters lorem ipsum dolor sit amet, consectetur adipiscing elit, sed."
},
"bodycopy": {
"text": "<p>Text (optional) up to 200 characters lorem ipsum dolor sit amet, consectetur adipiscing elit ut labore. Duis aute sunt in culpa qui officia deserunt id est t <a href='#' class='link link_simple'><span>link inline (optional)</span></a> laborum ut enim ad minim.</p>"
},
"torchRed": true
}
.banner {
position: relative;
&__wrapper {
position:relative;
display:flex;
flex-flow: nowrap;
align-items: center;
@media (--viewport-xs-min) {
flex-flow: column;
margin: 0 -20px;
}
@media (--viewport-ms-min) {
flex-flow: column;
margin: 0;
}
@media (--viewport-sm-min) {
flex-flow: nowrap;
margin: 0;
}
@media (--viewport-md-min) {
flex-flow: nowrap;
margin: 0
}
@media (--viewport-lg-min) {
flex-flow: nowrap;
margin: 0
}
&.overhead {
height: 100%;
@media (--viewport-xs-min) {
margin-top: 0;
align-items: flex-start;
padding-bottom: 104px;
}
@media (--viewport-ms-min) {
margin-top: 0;
align-items: flex-start;
padding-bottom: 104px;
}
@media (--viewport-sm-min) {
align-items: stretch;
padding-bottom: 0;
}
@media (--viewport-md-min) {
align-items: stretch;
padding-bottom: 0;
}
@media (--viewport-lg-min) {
align-items: stretch;
padding-bottom: 0;
}
}
}
&_reversed {
.banner {
&__wrapper {
flex-flow: row-reverse;
@media (--viewport-ms-max) {
flex-flow: column;
}
}
&__content {
@media (--viewport-ms-only) {
padding: 11px 11px 11px 30px;
}
&.overhead {
@media (--viewport-xs-min) {
margin-left: 16.66666667%;
}
@media (--viewport-sm-min) {
margin-right: -16.66666667%;
}
}
}
}
}
&__support {
position: relative;
width:100%;
height: 100%;
overflow: hidden; /* para evitar espacio bajo la imagen en reversed */
line-height: 0;
padding:0;
background-repeat: no-repeat;
background-position: center;
@media (--viewport-xs-min) {
max-height:256px;
min-height:256px;
background-size: contain;
background-position: center;
}
@media (--viewport-ms-min) {
max-height:256px;
min-height:256px;
background-size: contain;
background-position: center;
}
@media (--viewport-sm-min) {
max-height: 100%;
min-height:256px;
background-size: contain;
background-position: center;
}
&.overhead {
background-position: left;
background-size: cover;
}
img {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
@media (--viewport-ms-max) {
display: block;
}
&.isContain {
height: auto;
object-fit: contain;
}
}
&-label-wrapper {
position: relative;
.row {
padding: 0;
position: relative;
}
}
&-text {
position: relative;
}
}
&__content {
width: 100%;
/* height: 346px; */
position:relative;
margin-top: 0;
@media (--viewport-xs-min) {
padding: 56px 40px;
}
@media (--viewport-ms-min) {
padding: 64px 64px;
}
@media (--viewport-sm-min) {
padding: 64px;
}
@media (--viewport-md-min) {
padding: 64px;
}
&.overhead {
@media (--viewport-xs-min) {
margin-left: 0;
height: auto;
margin-top: -104px;
padding: 56px 40px 0 40px;
}
@media (--viewport-ms-min) {
margin-left: 0;
height: auto;
margin-top: -104px;
padding: 56px 40px 0 40px;
}
@media (--viewport-sm-min) {
margin-left: -16.66666667%;
height: auto;
margin-top: 104px;
padding: 56px 40px;
}
@media (--viewport-md-min) {
margin-left: -16.66666667%;
height: auto;
margin-top: 104px;
}
}
}
&__bodycopy {
margin-top: 24px;
}
&__toolbar {
display: flex;
gap:32px;
}
&__btn,
&__link {
margin-top: 24px;
}
.row.mobileReverse {
@media (--viewport-xs-max) {
flex-direction: column-reverse;
}
}
.bg-color {
&_bridesmade {
background-color: var(--color-background-accent);
}
&_torch-red {
background-color: var(--color-background-accent-bold);
.banner__title {
.title-l {
color:var(--color-text-inverse);
}
}
.banner__bodycopy {
.bodycopy-m {
color:var(--color-text-inverse);
}
}
.link {
Color: var(--color-text-link-primary-inverse);
}
}
&_eggplant {
background-color: var(--color-background-accent-bolder);
.banner__title {
.title-l {
color:var(--color-text-inverse);
}
}
.banner__bodycopy {
.bodycopy-m {
color:var(--color-text-inverse);
}
}
.link {
Color: var(--color-text-link-primary-inverse);
}
}
}
}
No notes defined.