<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-12 col-lg-12">
<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">QUIENES SOMOS</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">BLOG</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m">ACTUALIDAD DE HIPOTECAS</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 blog</span>
</a>
</div>
</div>
<div class="ancho-completo-header__title">
<h2 class="
title-l
">
Actualidad de hipotecas
</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
},
"breadcrumbs": {
"breadcrumb": [
{
"href": "#",
"label": {
"text": "Home"
}
},
{
"href": "#",
"label": {
"text": "QUIENES SOMOS"
}
},
{
"href": "#",
"label": {
"text": "BLOG"
}
},
{
"label": {
"text": "ACTUALIDAD DE HIPOTECAS"
}
}
]
},
"link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver a blog"
},
"title": {
"text": "Actualidad de hipotecas"
},
"isHeaderBefore": 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)