<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-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">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">SALA DE COMUNICACIÓN</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="#">
<div class="breadcrumbs__label">
<div class="text-label-m">ACTUALIDAD</div>
</div>
</a>
</li>
<li class="breadcrumbs__item">
<div class="breadcrumbs__label inactive">
<div class="text-label-m">UCI OBTIENE LA CERTIFICACIÓN ISO 22301 Y RENUEVA LA ISO 27001, GARANTIZANDO LA CONTINUIDAD DE SU NEGOCIO Y SEGURIDAD DE LA INFORMACIÓN</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 Sala de Comunicación</span>
</a>
</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"
}
},
{
"href": "#",
"label": {
"text": "SALA DE COMUNICACIÓN"
}
},
{
"href": "#",
"label": {
"text": "ACTUALIDAD"
}
},
{
"label": {
"text": "UCI OBTIENE LA CERTIFICACIÓN ISO 22301 Y RENUEVA LA ISO 27001, GARANTIZANDO LA CONTINUIDAD DE SU NEGOCIO Y SEGURIDAD DE LA INFORMACIÓN"
}
}
]
},
"link": {
"isSimple": true,
"icon-before": {
"name": "chebron-left",
"isBefore": true
},
"href": "#",
"text": "Volver a Sala de Comunicación"
},
"title": false,
"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)