<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="icons-nav">
<div class="
icons-nav__wrapper
sticky-clone__wrapper
">
<ul class="icons-nav__list">
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#logotipo">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/LOGOTIPO.svg" alt="Logotipo">
</div>
<div class="icon-button__title">
<p class="
title-s
">Logotipo</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#color">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/COLOR.svg" alt="Color">
</div>
<div class="icon-button__title">
<p class="
title-s
">Color</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#tipografia">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/TIPOGRAFIA.svg" alt="Tipografía">
</div>
<div class="icon-button__title">
<p class="
title-s
">Tipografía</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#emojis">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/EMOJI.svg" alt="Emojis">
</div>
<div class="icon-button__title">
<p class="
title-s
">Emojis</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#iconos">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/ICONOS.svg" alt="Iconos">
</div>
<div class="icon-button__title">
<p class="
title-s
">Iconos</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#ilustraciones">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/ILUSTRACIONES.svg" alt="Ilustraciones">
</div>
<div class="icon-button__title">
<p class="
title-s
">Ilustraciones</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#fotografia">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/FOTOGRAFIA.svg" alt="Fotografía">
</div>
<div class="icon-button__title">
<p class="
title-s
">Fotografía</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#musica">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/MUSICA.svg" alt="Música">
</div>
<div class="icon-button__title">
<p class="
title-s
">Música</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#outofthebank">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/OUT.svg" alt="Out of the bank">
</div>
<div class="icon-button__title">
<p class="
title-s
">Out of the bank</p>
</div>
</a>
</div>
</li>
<li class="icons-nav__item">
<div class="icon-button">
<a class="icon-button__link" href="#composicion">
<div class="icon-button__pic">
<img class="icon-button__img" src="https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/COMPOSICION.svg" alt="Composición">
</div>
<div class="icon-button__title">
<p class="
title-s
">Composición</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="icons-nav">
<div class="
icons-nav__wrapper
{{#if isSticky}}sticky-clone__wrapper{{/if}}
">
<ul class="icons-nav__list">
{{#each icon}}
<li class="icons-nav__item">
{{> @icon-button this }}
</li>
{{/each}}
</ul>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"isSticky": true,
"icon": [
{
"href": "#logotipo",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/LOGOTIPO.svg",
"alt": "Logotipo",
"title": {
"text": "Logotipo",
"isP": true
},
"isImg": true
},
{
"href": "#color",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/COLOR.svg",
"alt": "Color",
"title": {
"text": "Color",
"isP": true
},
"isImg": true
},
{
"href": "#tipografia",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/TIPOGRAFIA.svg",
"alt": "Tipografía",
"title": {
"text": "Tipografía",
"isP": true
},
"isImg": true
},
{
"href": "#emojis",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/EMOJI.svg",
"alt": "Emojis",
"title": {
"text": "Emojis",
"isP": true
},
"isImg": true
},
{
"href": "#iconos",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/ICONOS.svg",
"alt": "Iconos",
"title": {
"text": "Iconos",
"isP": true
},
"isImg": true
},
{
"href": "#ilustraciones",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/ILUSTRACIONES.svg",
"alt": "Ilustraciones",
"title": {
"text": "Ilustraciones",
"isP": true
},
"isImg": true
},
{
"href": "#fotografia",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/FOTOGRAFIA.svg",
"alt": "Fotografía",
"title": {
"text": "Fotografía",
"isP": true
},
"isImg": true
},
{
"href": "#musica",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/MUSICA.svg",
"alt": "Música",
"title": {
"text": "Música",
"isP": true
},
"isImg": true
},
{
"href": "#outofthebank",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/OUT.svg",
"alt": "Out of the bank",
"title": {
"text": "Out of the bank",
"isP": true
},
"isImg": true
},
{
"href": "#composicion",
"src": "https://qa.hipotecas.com/-/media/Brand-Center-SHAREPOINT/Nav_Icons/COMPOSICION.svg",
"alt": "Composición",
"title": {
"text": "Composición",
"isP": true
},
"isImg": true
}
]
}
.icons-nav {
overflow-x: scroll;
scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox */
-ms-overflow-style: none; /* Hide the scrollbar in IE and Edge */
padding-top: 40px;
text-align: center;
transition: all 0.3s;
&::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chromium */
}
@media (--viewport-ms-min) {
}
@media (--viewport-sm-min) {
padding-top: 30px;
}
@media (--viewport-md-min) {
}
@media (--viewport-lg-min) {
}
&__list {
display: inline-flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
@media (--viewport-xs-max){
flex-wrap:nowrap;
width: auto;
}
}
&__item {
width: 20%;
text-align: center;
@media (--viewport-xs-max) {
display:block;
width:120px;
}
}
.sticky-clone {
padding: 14px 0;
.icon-button__pic{display:none;}
}
}
Faltan los iconos en versión UCI