<section class="splitter splitter_bg-color_white splitter_header-before ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7">
<div class="row">
<div class=" col-xs-12 col-ms-9 col-ms-mr-ml col-sm-9 col-lg-9 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">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">centro de ayuda</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">preguntas frecuentes</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m">Solicitud de hipotecas</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5">
<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">
<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 preguntas frecuentes</span>
</a>
</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": false,
"bgColorWhite": true,
"twoColumnSevenFive": true
},
"breadcrumbs": {
"breadcrumb": [
{
"href": "#",
"label": {
"text": "Home"
}
},
{
"href": "#",
"label": {
"text": "centro de ayuda"
}
},
{
"href": "#",
"label": {
"text": "preguntas frecuentes"
}
},
{
"label": {
"text": "Solicitud de hipotecas"
}
}
]
},
"link": false,
"title": false,
"isHeaderBefore": true,
"second-col-link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver a preguntas frecuentes"
}
}
.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)