<section class="splitter splitter_bg-color_white ">
<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">
<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">inmobiliarios</div>
</div>
</li>
</ul>
</div>
<div class="ancho-completo-header__back">
<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 class="ancho-completo-header__title">
<h2 class="
title-l
">
Inmobiliarios
</h2>
</div>
</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
},
"breadcrumbs": {
"breadcrumb": [
{
"href": "#",
"label": {
"text": "Home"
}
},
{
"label": {
"text": "inmobiliarios"
}
}
]
},
"link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver a preguntas frecuentes"
},
"title": {
"text": "Inmobiliarios"
},
"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)