<section class="splitter splitter_bg-color_white splitter_padding_top_medium splitter_padding_bottom_medium ">
<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="tags-links">
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11">
<div class="tags-links__wrapper">
<div class="tags-links__head">
<div class="tags-links__title">
<h3 class="
title-m
">Puedes seguir leyendo sobre…</h3>
</div>
</div>
<div class="tags-links__body">
<ul class="tags-links__list">
<li class="tags-links__item">
<a class="tags-links__link" href="#">
<div class="
text-label-s
text-label-s_color_accent_dark
"><span>TAG DE CONTROLO</span></div>
</a>
</li>
<li class="tags-links__item">
<a class="tags-links__link" href="#">
<div class="
text-label-s
text-label-s_color_accent_dark
"><span>OVERFLOW 1</span></div>
</a>
</li>
<li class="tags-links__item">
<a class="tags-links__link" href="#">
<div class="
text-label-s
text-label-s_color_accent_dark
"><span>OVERFLOW 2</span></div>
</a>
</li>
<li class="tags-links__item">
<a class="tags-links__link" href="#">
<div class="
text-label-s
text-label-s_color_accent_dark
"><span>OVERFLOW 3</span></div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="tags-links">
<div class="row">
<div class="col-xs-12 col-ms-10_5 col-ms-ml col-sm-11 col-lg-11">
<div class="tags-links__wrapper">
<div class="tags-links__head">
<div class="tags-links__title">
{{> @title-m title }}
</div>
</div>
<div class="tags-links__body">
<ul class="tags-links__list">
{{#each tag}}
<li class="tags-links__item">
<a class="tags-links__link" href="{{ this.href }}">
{{> @text-label-s this.label }}
</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopMedium": true,
"paddingBottomMedium": true
},
"title": {
"text": "Puedes seguir leyendo sobre…"
},
"tag": [
{
"href": "#",
"label": {
"text": "TAG DE CONTROLO",
"colorAccentDark": true
}
},
{
"href": "#",
"label": {
"text": "OVERFLOW 1",
"colorAccentDark": true
}
},
{
"href": "#",
"label": {
"text": "OVERFLOW 2",
"colorAccentDark": true
}
},
{
"href": "#",
"label": {
"text": "OVERFLOW 3",
"colorAccentDark": true
}
}
]
}
.tags-links {
&__head {
margin-bottom: 30px;
@media (--viewport-ms-min) {
margin-bottom: 34px;
}
}
&__list {
overflow-x: scroll;
scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox */
-ms-overflow-style: none; /* Hide the scrollbar in IE and Edge */
display: flex;
margin-right: -19px;
flex-wrap: wrap;
align-content: space-between;
row-gap: 10px;
column-gap: 10 px;
@media (--viewport-ms-min) {
margin-right: -31px;
}
@media (--viewport-md-min) {
margin-right: -32px;
}
@media (--viewport-lg-min) {
margin-right: -50px;
}
&::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chromium */
}
}
&__item {
flex-shrink: 0;
margin-right: 20px;
@media (--viewport-ms-only) {
margin-right: 30px;
}
&: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;
}
}
}
&__link {
display: flex;
padding: 5px 20px 4px;
background-color: var(--color-bg-1);
transition: all 0.3s;
.text-label-s{color: var(--color-txt-quinary);}
&:hover,
&:focus {
background-color: var(--color-accent);
.text-label-s{color: var(--color-text-light);}
}
}
}
Configurable el href de cada tag.