<div id="id" class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
</ul>
</div>
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
<span class="title-l
">texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="header-submenu__sidebar-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div{{#if id}} id="{{id}}" {{/if}} class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
{{#each item}}
{{#if this.label}}
<li class="header-submenu__main-list-wrap">
<ul>
<li class="header-submenu__main-list-wrap-item">
{{> @caption this.label }}
{{#each subitem}}
<div class="header-submenu__main-list-wrap-item-subitem">
<div class="header-submenu__main-list-wrap-item-subitem-link">
{{> @link this.link }}
</div>
</div>
{{/each}}
</li>
</ul>
</li>
{{else}}
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
{{#if this.icon}}
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
{{> @icon this.icon }}
</div>
{{/if}}
<div class="header-submenu__main-list-item-tile-link">
{{> @link this.link }}
</div>
{{#if this.text}}
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
{{> @bodycopy this.text }}
</div>
{{/if}}
</div>
</li>
{{/if}}
{{/each}}
</ul>
{{#if sidebar}}
{{else}}
{{#if link-optional}}
<div class="header-submenu__main-link-optional">
{{> @link link-optional }}
</div>
{{/if}}
{{/if}}
</div>
{{#if sidebar}}
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
{{> @title sidebar.text }}
</div>
{{#if link-optional}}
<div class="header-submenu__sidebar-link-optional">
{{> @link link-optional }}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>
{
"id": "id",
"item": [
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
}
],
"link-optional": {
"text": "Texto del link opcional",
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
},
"href": "#"
},
"sidebar": {
"text": {
"text": "texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-l"
}
}
}
.header-submenu {
background-color: var(--color-background);
padding: 40px 70px;
@media (--viewport-ms-max) {
padding: 15px 20px; /* old (para la refactorización del header se ha modificado CA. R. ) padding: 0 0 30px 20px;*/
}
.hidden-xs-ms {
/* Este estilo debe ser sustituido por js (CA.R.) */
@media (--viewport-ms-max) {
display: none;
}
}
&>.row>.col {
display: flex;
flex-direction: row;
@media (--viewport-ms-max) {
flex-direction: column;
}
.block:first-child {
width: 69%;
padding-right: 40px;
@media (--viewport-md-max) {
width: 63%;
}
@media (--viewport-ms-max) {
width: 100%;
}
.header-submenu__main-list {
&-item {
width: calc(50% - 10px);
@media (--viewport-ms-max) {
width: 100%;
}
}
}
}
.block:only-child {
width: 100%;
padding-right: 0;
.header-submenu__main-list {
&-item {
width: calc(33.3% - 13.3px);
@media (--viewport-ms-max) {
width: 100%;
}
}
}
}
}
&__main {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
&-list {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
column-gap: 20px;
width: 100%;
@media (--viewport-ms-max) {
flex-direction: column;
grid-row-gap: 24px;
}
&-item {
/*width: calc(33.3% - 13.3px);*/
&-tile {
display: flex;
flex-direction: column;
row-gap: 8px;
&-icon {line-height: 0;}
&-link {
a.link {
color: var(--color-text-link-secondary);
text-decoration: underline;
span {
display: inline;
}
@media (--viewport-ms-max) {
font-family: 'Jornada Sans Book';
color: var(--color-text-link-primary);
text-decoration: none;
font-size: 16px;
line-height: 24px;
/* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile (CA. R.)*/
}
}
}
}
}
&-wrap {
width: calc(33.3% - 13.3px);
flex-grow: 1;
@media (--viewport-ms-max) {
width: auto;
}
&-item {
.caption-label {
color: var(--color-text-accent);
margin-bottom: 8px;
@media (--viewport-ms-max) {
font-family: 'Jornada Sans Book';
text-transform: none;
letter-spacing: normal;
font-size: 16px;
line-height: 24px;
/* porque necesitamos que un link bodycopy-s se vea bodycopy-m en mobile (CA. R.)*/
}
}
&-subitem {
margin-top: 16px;
&-link {
.icon {
@media (--viewport-ms-max) {
display: none;
/* Este estilo serÃa aconsejable sustituirlo por js (CA.R.) */
}
}
}
}
}
}
}
&-link-optional {
margin-top: 40px;
align-self: flex-end;
.icon {
fill: var(--color-icon);
}
@media (--viewport-ms-max) {
margin-top: 24px;
align-self: flex-start;
.link {
padding: 0;
.icon {
display: none;
}
}
}
}
}
&__sidebar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31%;
@media (--viewport-md-max) {
width: 37%;
}
padding-left: 40px;
border-left: solid 1px var(--color-border);
@media (--viewport-ms-max) {
width: 100%;
padding-left: 0;
border: 0;
}
&-text {}
&-link-optional {
margin-top: 40px;
align-self: flex-start;
.icon {
fill: var(--color-icon);
}
@media (--viewport-ms-max) {
margin-top: 24px;
align-self: flex-start;
margin-bottom: 14px;
.link {
padding: 0;
.icon {
display: none;
}
}
}
}
}
}
Variantes: Default (products), Products, With a sidebar, Links (Insurances and services, About us and Help) Por defecto carga el listado de productos para que tenga contenido. Permite configurar tÃtulo, icono y su alt, y de cada producto, su tÃtulo, icono con alt.