<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="faq accent-version accent-light-bg">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-offset-1 col-ms-offset-right-1 col-sm-10 col-lg-10 col">
<div class="faq__content">
<div class="faq__title">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<h2 class="
title-l
">
Title example
</h2>
</div>
</div>
</div>
<div class="faq__accordion">
<div class="accordion ">
<ul class="accordion__list">
<li class="accordion__item">
<button class="
accordion__trigger
active
" type="button">
<span class="bodycopy-l">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <svg class="icon icon-chebron-down accent">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="faq__link">
<a class="link
" href="#">
<span>Lorem ipsum dolor sit amet</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="faq{{#if boxes-version}} boxes-version{{/if}}{{#if accent-version}} accent-version{{/if}}{{#if accent-light-bg}} accent-light-bg{{/if}}">
<div class="row">
{{#if box-title}}
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-6 col-lg-6 col">
<div class="faq__content">
<div class="faq__icon">
{{#if faq-icon}}
{{render '@icon' icon}}
{{/if}}
</div>
<div class="faq__title">
{{> @title-l title }}
</div>
<div class="faq__accordion">
{{> @accordion accordion }}
</div>
{{#if link}}
<div class="faq__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{#if box-media}}
<div class="faq__box faq__box__media lazyloaded">
<div class="row">
<div class="col-xs-9 col-xs-mr-ml col-ms-9 col-sm-12 col-lg-12 col">
<div class="faq__box-wrapper">
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Seguros/Seguros_ProteccionPagos.jpg" alt="banner agapimu" class="">
<div class="faq__box__media--content">
<div class="faq__box-title">
{{> @title-l box-title }}
</div>
{{#if box-bodycopy}}
<div class="faq__box-bodycopy rich-text">
{{> @bodycopy-m box-bodycopy }}
</div>
{{/if}}
{{#if box-link}}
<div class="faq__box-link">
{{> @link box-link }}
</div>
{{/if}}
{{#if btn}}
<div class="faq__box-btn">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{else}}
<div class="faq__box">
<div class="row">
<div class="col-xs-9 col-xs-mr-ml col-ms-9 col-sm-12 col-lg-12 col">
<div class="faq__box-wrapper">
<div class="faq__box-title">
{{> @title-l box-title }}
</div>
{{#if box-bodycopy}}
<div class="faq__box-bodycopy rich-text">
{{> @bodycopy-m box-bodycopy }}
</div>
{{/if}}
{{#if box-link}}
<div class="faq__box-link">
{{> @link box-link }}
</div>
{{/if}}
{{#if btn}}
<div class="faq__box-btn">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/if}}
{{#unless btn}}
{{ render '@line' }}
{{/unless}}
</div>
{{else}}
<div class="col-xs-12 col-ms-10 col-ms-offset-1 col-ms-offset-right-1 col-sm-10 col-lg-10 col">
<div class="faq__content">
<div class="faq__title">
<div class="row">
{{#if title-fullwidth}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{/if}}
{{> @title-l title }}
</div>
</div>
</div>
<div class="faq__accordion">
{{> @accordion accordion }}
</div>
{{#if link}}
<div class="faq__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Title example"
},
"accordion": {
"item": [
{
"isAccentChebron": true,
"isActive": true,
"trigger": {
"text": "Lorem ipsum dolor sit amet",
"type": "-l"
},
"description": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "Lorem ipsum dolor sit amet",
"type": "-l"
},
"description": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "Lorem ipsum dolor sit amet",
"type": "-l"
},
"description": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>"
}
},
{
"isAccentChebron": true,
"trigger": {
"text": "Lorem ipsum dolor sit amet",
"type": "-l"
},
"description": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed massa et nibh semper consectetur ut in eros. Sed posuere, nulla in faucibus dignissim, ex mi consequat ligula, vel egestas felis massa a dui. Suspendisse rutrum consectetur justo, vel vulputate erat tempus eu. Morbi varius nisi non massa aliquam efficitur. </p>"
}
}
]
},
"box-title": false,
"box-bodycopy": {
"text": "<p>Agrupa todos los préstamos e hipotecas que tengas contraídos en un solo préstamo.</p>",
"colorLight": true
},
"box-link": {
"href": "#",
"text": "Iniciar simulador",
"isLight": true
},
"accent-version": true,
"accent-light-bg": true,
"title-fullwidth": true,
"link": {
"href": "#",
"text": "Lorem ipsum dolor sit amet"
}
}
.faq {
&__content {
margin-bottom: 60px;
}
&__icon .icon {
width: 40px;
height: 40px;
margin-bottom: calc(var(--gutter-vertical)*4);
}
&__title {
margin-bottom: 30px;
}
&__link {
margin-top: 30px;
}
&__box {
display: flex;
align-items: center;
min-height: 300px;
padding: 60px 0;
text-align: center;
background-color: var(--color-accent);
@media (--viewport-ms-min) {
min-height: 293px;
}
@media (--viewport-sm-min) {
min-height: 537px;
padding: 60px;
}
&-bodycopy {
margin-top: 20px;
}
&-link,
&-btn {
margin-top: 30px;
}
.row {
flex-grow: 1;
}
&__media {
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.faq__box-wrapper {
height: 100%;
width: 100%;
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 2;
content: "";
opacity: .2;
background: #000;
}
}
&--content {
display: flex;
max-width: 100%;
width: 100%;
height: 100%;
justify-content: center;
align-content: center;
flex-flow: column;
z-index: 2;
position: relative;
.faq__box-bodycopy {
margin-top: 20px;
}
.faq__box-link,
.faq__box-btn {
margin-top: 30px;
}
}
}
}
&.accent-version {
.faq__title {
text-align: center;
.title-l {
color: var(--color-secondary);
}
}
.accordion__item {
border-bottom-color: var(--color-accent-dark);
.bodycopy-l {
font-weight: bold;
}
.accordion__trigger .icon {
width: 19px;
height: 19px;
}
}
.faq__link {
text-align: center;
margin-top: 40px;
}
}
&.boxes-version {
.faq__title {
text-align: center;
.title-l {
color: var(--color-secondary);
}
}
.accordion__item {
border: solid 1px var(--color-accent-dark);
padding: 0 30px;
margin-bottom: 20px;
.accordion__trigger .icon{
width: 19px;
height: 19px;
}
.bodycopy-l {
font-weight: bold;
}
}
.faq__link {
text-align: center;
margin-top: 40px;
}
}
&.accent-light-bg {
background-color: var(--color-accent-light);
@media (--viewport-xs-max) {
margin: 0 -20px;
padding: 0 20px;
}
.faq__title {
margin-top: 50px;
}
&.boxes-version {
.accordion__item {
border: solid 1px var(--color-accent-dark);
}
}
}
}
Variantes: Default, Fullwidth, With a link, With a button, With an icon, With a image, Accent version, Boxes version