<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="text">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="text__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10 col">
<div class="text__title">
<h2 class="title-xl
">¡Gracias!</h2>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="text__first-subtitle">
<h3 class="title-l
">Title L - Subtitle</h3>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="text__icon-heading">
<svg class="icon icon-complex_party icon-80 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_party"></use>
</svg>
</div>
<!-- deprecado por DS
-->
<div class="text__btn">
<a class="btn
" href="#" id="">
Button
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="text__tag">
<div class="tag success">
<span class="caption-label">TAG SUCCESS</span>
</div>
</div>
<div class="text__title-api">
<span class="title-l
">Title L – Mensaje de API</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="text__title-api">
<span class="title-m
">Featured text</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="text__bodycopy">
<div class="
bodycopy-m
">
<p>¿Y ahora qué?</p>
</div>
</div>
<div class="text__bullets-list twocolslist">
<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>
<span class="bodycopy">POR LO QUE PUEDA PASAR POR LO QUE PUEDA PASAR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASARcs adsdsdsdsd ds dsadsad</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASAR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASAR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASAR POR LO QUE PUEDA PASAR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASAR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</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>
<span class="bodycopy">POR LO QUE PUEDA PASAR fkjdsfhdlsjfhdlkfdlfjd</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="text__additionaltext">
<div class="
bodycopy-m
">
<p>Body text agregado a Sitecore con <a href='#'>links inline</a> (rich text). Tiene máximo 600 caracteres.</p>
</div>
</div>
<div class="text__smalltext">
<div class="
bodycopy-s
">
<p>*En Hipotecas.com nos preocupamos por la seguridad de tus datos, por lo que vas a recibir un email desde el remitente Clikcandsign para que nos autorices a ofrecerte productos y servicios adaptados a tus necesidades (GDPR).</p>
</div>
</div>
<div class="text__link">
<a class="link
" href="#">
<span>Entra en todos los productos para extranjeros</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div{{#if id}} id="{{id}}" {{/if}}
class="text{{#if isAccent}} bg-color_accent{{/if}}{{#if isAccentBold}} bg-color_accent-bold{{/if}}{{#if isAccentBolder}} bg-color_accent-bolder{{/if}}">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="text__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10 col">
<div class="text__title">
{{> @title title }}
</div>
{{#if first-row-subtitle}}
<div class="text__first-subtitle">
{{> @title first-row-subtitle }}
</div>
{{/if}}
{{#if icon-heading}}
<div class="text__icon-heading">
{{> @icon icon-heading }}
</div>
{{/if}}
<!-- deprecado por DS
{{#if paragraph}}
<div class="text__paragraph">
{{> @bodycopy-m paragraph }}
</div>
{{/if}}-->
{{#if cta}}
<div class="text__btn">
{{> @btn cta }}
</div>
{{/if}}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{#if tag}}
<div class="text__tag">
{{> @tag tag }}
</div>
{{/if}}
{{#if title-api}}
<div class="text__title-api">
{{> @title title-api }}
</div>
{{/if}}
{{#if featured-text}}
<div class="text__title-api">
{{> @title featured-text }}
</div>
{{/if}}
{{#if bodycopy}}
<div class="text__bodycopy">
{{> @bodycopy-m bodycopy }}
</div>
{{/if}}
{{#if subtitle}}
<div class="text__subtitle">
{{> @title-s subtitle }}
</div>
{{/if}}
{{#if bulletlistitem}}
<div class="text__bullets-list{{#if isTwoColsList}} twocolslist{{/if}}">
<ul>
{{#each bulletlistitem}}
<li>
{{> @icon this }}{{> @bodycopy this }}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if additionaltext}}
<div class="text__additionaltext">
{{> @bodycopy-m additionaltext }}
</div>
{{/if}}
{{#if smalltext}}
<div class="text__smalltext">
{{> @bodycopy-s smalltext }}
</div>
{{/if}}
<div class="text__link">
{{> @link link }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"title": {
"text": "¡Gracias!",
"type": "-xl",
"isH2": true
},
"first-row-subtitle": {
"isH3": true,
"text": "Title L - Subtitle",
"type": "-l"
},
"icon-heading": {
"name": "complex_party",
"size80": true
},
"cta": {
"href": "#",
"text": "Button"
},
"tag": {
"caption": {
"text": "TAG SUCCESS",
"type": "-label"
},
"success": true
},
"title-api": {
"text": "Title L – Mensaje de API",
"type": "-l"
},
"featured-text": {
"text": "Featured text",
"type": "-m"
},
"bodycopy": {
"text": "<p>¿Y ahora qué?</p>"
},
"subtitle": false,
"isTwoColsList": true,
"bulletlistitem": [
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR POR LO QUE PUEDA PASAR"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASARcs adsdsdsdsd ds dsadsad"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR POR LO QUE PUEDA PASAR"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR"
},
{
"name": "bullet-list",
"text": "POR LO QUE PUEDA PASAR fkjdsfhdlsjfhdlkfdlfjd"
}
],
"additionaltext": {
"text": "<p>Body text agregado a Sitecore con <a href='#'>links inline</a> (rich text). Tiene máximo 600 caracteres.</p>"
},
"smalltext": {
"text": "<p>*En Hipotecas.com nos preocupamos por la seguridad de tus datos, por lo que vas a recibir un email desde el remitente Clikcandsign para que nos autorices a ofrecerte productos y servicios adaptados a tus necesidades (GDPR).</p>"
},
"link": {
"href": "#",
"text": "Entra en todos los productos para extranjeros"
}
}
.text {
@media (--viewport-ms-max) {
.row > .col + .col {
margin-top: 64px;
}
}
&.oneCol{
.text__bodycopy {
margin-top: 32px;
}
}
/* PRIMERA COLUMNA */
&__icon-heading {
margin-top: 32px;
}
/* deprecado por DS
&__paragraph {
margin-top: 32px;
} */
&__btn {
margin-top: 32px;
}
/* SEGUNDA COLUMNA */
&__title-api {
margin-top: 32px;
.title-l{
color: var(--color-text);
}
}
&__bodycopy, &__additionaltext {
margin-top: 32px;
a{
color: var(--color-text-link-secondary);
text-decoration: none;
}
}
&__subtitle {
margin-top: 32px;
}
&__bullets-list{
margin-top: 32px;
li{display: flex; align-items:top; padding:12px 0;
.icon{width: 24px; height:24px; margin-right: 16px;}
.text-label-m {display:inline; padding-top: 8px; width: calc(100%-44px);}
}
&.twocolslist{
ul{width: 100%;display: flex; flex-wrap: wrap;
li{width: 50%; padding-right: 10px;
&:nth-child(2), &:nth-child(4), &:nth-child(6), &:nth-child(8), &:nth-child(10), &:nth-child(12), &:nth-child(14), &:nth-child(16), &:nth-child(18), &:nth-child(20), &:nth-child(22), &:nth-child(24), &:nth-child(26), &:nth-child(28){padding-left: 10px; padding-right:0;}
@media (--viewport-xs-max) {
width:100%; padding-right: 0;
&:nth-child(2), &:nth-child(4), &:nth-child(6), &:nth-child(8), &:nth-child(10), &:nth-child(12), &:nth-child(14), &:nth-child(16), &:nth-child(18), &:nth-child(20), &:nth-child(22), &:nth-child(24), &:nth-child(26), &:nth-child(28){padding-left: 0;}
}
}
}
}
}
&__smalltext{
margin-top: 24px;
color: var(--color-text-subtle);
.bodycopy-s{
color: var(--color-text-subtle);
}
}
&__link {
margin-top: 32px;
}
&.bg-color{
&_accent {background-color: var(--color-background-accent);padding:50px 0;
@media (--viewport-xs-max) {
padding:20px;
margin: 0 -20px;
}
}
&_accent-bolder {background-color: var(--color-background-accent-bolder);padding:50px 0;
@media (--viewport-xs-max) {
padding:20px;
margin: 0 -20px;
}
.title-xl, .title-l, .title-m, .bodycopy-m, .bodycopy-s, .title-s, .link{ color:var(--color-white);}
.bodycopy-m{
a{color:var(--color-white);}
}
.link span:after{background-color:var(--color-white);}
.text__bullets-list{
.icon{
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(307deg) brightness(103%) contrast(103%);
}
}
}
&_accent-bold {background-color: var(--color-background-accent-bold);padding:50px 0;
@media (--viewport-xs-max) {
padding:20px;
margin: 0 -20px;
}
.title-xl, .title-l, .title-m, .bodycopy-m, .bodycopy-s, .title-s, .link{ color:var(--color-white);}
.bodycopy-m{
a{color:var(--color-white);}
}
.link span:after{background-color:var(--color-white);}
.text__bullets-list{
.icon{
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(307deg) brightness(103%) contrast(103%);
}
}
}
}
&.oneCol{
.text__bullets-list{
&.twocolslist{
ul{width: 70%;}
}
}
}
&__additionaltext{margin-top: 32px;
}
}
Variantes: Default, For Help Center, CTA, Is Yellow, Accent Light, Accent Dark, Accent, Green, Small text, Bullets List, Bullets List in 2 cols.