<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="product-buttons">
<div class="
product-buttons__wrapper
sticky-clone__wrapper
">
<ul class="product-buttons__list">
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">vive</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca Compra de casa</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">suma</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca Casa más reforma</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">cambia</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca cambio de casa</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">crea</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca compra de casa sobre plano</h4>
</div>
</a>
</div>
</li>
<li class="product-buttons__item">
<div class="product-button">
<a class="product-button__link" href="#">
<div class="product-button__pic">
<img class="product-button__img" src="/dist/images/compracasa-hipotecas.svg" alt="Product">
</div>
<div class="product-button__label">
<div class="text-label-m">unifica</div>
</div>
<div class="product-button__title">
<h4 class="
title-s
">Hipoteca para Reunificación de deudas</h4>
</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="product-buttons">
<div class="
product-buttons__wrapper
{{#if isSticky}}sticky-clone__wrapper{{/if}}
">
<ul class="product-buttons__list">
{{#each product}}
<li class="product-buttons__item">
{{> @product-button this }}
</li>
{{/each}}
</ul>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"isSticky": true,
"product": [
{
"href": "#",
"src": "/dist/images/compracasa-hipotecas.svg",
"alt": "Product",
"label": {
"text": "vive"
},
"title": {
"text": "Hipoteca Compra de casa"
}
},
{
"href": "#",
"src": "/dist/images/compracasa-hipotecas.svg",
"alt": "Product",
"label": {
"text": "suma"
},
"title": {
"text": "Hipoteca Casa más reforma"
}
},
{
"href": "#",
"src": "/dist/images/compracasa-hipotecas.svg",
"alt": "Product",
"label": {
"text": "cambia"
},
"title": {
"text": "Hipoteca cambio de casa"
}
},
{
"href": "#",
"src": "/dist/images/compracasa-hipotecas.svg",
"alt": "Product",
"label": {
"text": "crea"
},
"title": {
"text": "Hipoteca compra de casa sobre plano"
}
},
{
"href": "#",
"src": "/dist/images/compracasa-hipotecas.svg",
"alt": "Product",
"label": {
"text": "unifica"
},
"title": {
"text": "Hipoteca para Reunificación de deudas"
}
}
]
}
.product-buttons {
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;
margin-right: -19px;
text-align: center;
transition: all 0.3s;
&::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chromium */
}
@media (--viewport-ms-min) {
margin-right: -31px;
}
@media (--viewport-sm-min) {
padding-top: 30px;
}
@media (--viewport-md-min) {
margin-right: -32px;
}
@media (--viewport-lg-min) {
margin-right: -50px;
}
&.sticky-clone {
padding: 14px 0;
.product-buttons {
&__item {
margin-right: 53.5px;
&:last-child {
padding-right: 0;
margin-right: 0;
}
}
}
.product-button {
&__pic {
max-width: 40px;
margin-bottom: 13px;
}
&__label {
display: none;
}
&__title {
h1,
h2,
h3,
h4,
h5,
h6,
div,
span {
font-family: 'Jornada Sans Medium';
text-transform: uppercase;
font-size: 10px;
font-weight: normal;
line-height: 20px;
letter-spacing: 1.2px;
@media (--viewport-lg-min) {
font-size: 12px;
line-height: 22px;
letter-spacing: 1.4px;
}
}
}
}
}
&__list {
display: inline-flex;
}
&__item {
margin-right: 40px;
@media (--viewport-sm-min) {
margin-right: 80px;
}
&:last-child {
padding-right: 19px;
margin-right: 0;
@media (--viewport-ms-min) {
padding-right: 31px;
}
@media (--viewport-md-min) {
padding-right: 32px;
}
@media (--viewport-lg-min) {
padding-right: 50px;
}
}
}
}
Variantes: Default, Is not sticky (ya que por defecto carga la variante sticky)