<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_header-before ">
<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="row">
<div class=" col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col ">
<div class="ancho-completo-header ancho-completo-header_before">
<div class="ancho-completo-header__nav">
<div class="ancho-completo-header__breadcrumbs">
<ul class="
breadcrumbs
">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">Home</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m">SOLICITA TU HIPOTECA</div>
</div>
</li>
</ul>
</div>
<div class="ancho-completo-header__back ancho-completo-header__back_before">
<a class="link
link_simple
link_has-icon link_has-icon_before
" href="#">
<svg class="icon icon-chebron-left icon-before">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
<span>Volver a datos de contacto</span>
</a>
</div>
</div>
<div class="ancho-completo-header__title">
<h2 class="
title-l
">
Una hipoteca para <span class='placeholder'>ti</span>
</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#if isHeaderBefore}} {{#extend '@splitter' splitter }} {{#content 'content-first-column'}}
<div class="row">
<div
class="{{#if isSm10}} col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col {{else}} col-xs-12 col-ms-9 col-ms-mr-ml col-sm-9 col-lg-9 col {{/if}}">
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="ancho-completo-header ancho-completo-header_before{{#if isFull}} full{{/if}}{{#if noMargin}} nomargin{{/if}}">
<div class="ancho-completo-header__nav">
<div class="ancho-completo-header__breadcrumbs">
{{> @breadcrumbs breadcrumbs }}
</div>
{{#if link}}
<div class="ancho-completo-header__back ancho-completo-header__back_before">
{{> @link link }}
</div>
{{/if}}
</div>
{{#if title}}
<div class="ancho-completo-header__title">
{{> @title-l title }}
</div>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{#content 'content-second-column'}}
{{#if second-col-link}}
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-sm-mr-ml-0 col-lg-12 col">
<div class="ancho-completo-header__back ancho-completo-header__back_before">
{{> @link second-col-link }}
</div>
</div>
</div>
{{/if}}
{{/content}}
{{/extend}}
{{else}}
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="ancho-completo-header{{#if isFull}} full{{/if}}{{#if noMargin}} nomargin{{/if}}">
<div class="ancho-completo-header__nav{{#if languages}} languages{{/if}}">
<div class="ancho-completo-header__breadcrumbs">
{{> @breadcrumbs breadcrumbs }}
</div>
{{#if link}}
<div class="ancho-completo-header__back">
{{> @link link }}
</div>
{{else if languages}}
<div class="ancho-completo-header__languages">
{{> @icon icon-languages }}
{{> @bodycopy-m text-languages }}
<ul>
{{#each languages}}<li>{{> @link languages-item }}</li>{{/each}}
</ul>
</div>
{{/if}}
</div>
{{#if title}}
<div class="ancho-completo-header__title">
{{> @title-l title }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{{/if}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true
},
"breadcrumbs": {
"breadcrumb": [
{
"href": "#",
"label": {
"text": "Home"
}
},
{
"label": {
"text": "SOLICITA TU HIPOTECA"
}
}
]
},
"link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver a datos de contacto"
},
"title": {
"text": "Una hipoteca para <span class='placeholder'>ti</span>"
},
"isHeaderBefore": true,
"isSm10": true
}
.ancho-completo-header {
position: relative;
z-index: 0;
padding: 40px 0 60px;
&.nomargin{
padding-bottom: 0;
}
@media (--viewport-ms-min) {
padding: 60px 0;
}
&_before {
padding: 0;
margin-bottom: 20px;
@media (--viewport-sm-min) {
margin-bottom: 60px;
}
.ancho-completo-header {
&__title {
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
@media (--viewport-ms-only) {
margin-bottom: 40px;
}
}
}
}
&__title {
margin-top: 20px;
}
&__back {
@media (--viewport-ms-max) {
display: none;
}
&_before {
text-align: right;
}
a {
white-space: nowrap;
}
}
&__breadcrumbs {
overflow-x: hidden;
width: 50%;
@media (--viewport-sm-max) {
width: 60%;
}
@media (--viewport-ms-max) {
width: 100%;
padding: 0;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media (--viewport-ms-max) {
flex-wrap: wrap;
}
li {
white-space: nowrap;
@media (--viewport-ms-max) {
white-space: normal;
}
&:last-child {
white-space: normal;
min-width: 0;
}
}
}
}
&__nav {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap:40px;
&.languages {
@media (--viewport-ms-max) {
flex-direction: column;
align-items: flex-start;
.ancho-completo-header__breadcrumbs{
max-width: 100%;
}
}
}
}
&__languages {
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: 40px;
@media (--viewport-ms-max) {
margin-top: 20px;
margin-left: 0;
}
.icon {
margin-right: 8px;
width: 16px;
height: 16px;
}
.bodycopy-m {
margin-right: 32px;
}
ul {
display: flex;
li {
border-left: solid 1px var(--color-grey3);
padding: 0 16px;
&:first-child {
border-left: none;
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
.link {
color: var(--color-grey3);
}
.link:hover {
color: var(--color-primary-brand);
}
.link_active {
color: var(--color-secondary);
}
}
}
}
&.full{
.ancho-completo-header__back {
@media (--viewport-ms-max) {
display: block;
}
}
@media (--viewport-ms-max) {
.ancho-completo-header__nav {
justify-content: flex-start;
align-items: flex-start;
grid-gap: 24px;
flex-direction: column;
}
.ancho-completo-header__title{
margin-top: 40px;
}
}
}
}
Variantes: Default, Viewport sm 10 cols, Second Col Link (y específicos por uso: Por Hipotecas Procts, For Sidebar Layout, For Glossary, For Calculator, For Help Center, For Contact, For Blog, For Category Tag, For Steps Header, For Data Collection, Fore Simulator Form, For Simulator Results, For Search Results, For detalle post, For Sitemap)