<div class="c-tabs c-tabs--timeline">
<div class="c-tabs__tablist automatic" role="tablist" aria-labelledby="tablist-1">
<button class="c-tabs__tab" id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
<span class="c-tabs__tab-text">2010</span>
</button>
<button class="c-tabs__tab" id="tab-2" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-2">
<span class="c-tabs__tab-text">2012</span>
</button>
<button class="c-tabs__tab" id="tab-3" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-3">
<span class="c-tabs__tab-text">2014</span>
</button>
<button class="c-tabs__tab" id="tab-4" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-4">
<span class="c-tabs__tab-text">2010</span>
</button>
<button class="c-tabs__tab" id="tab-5" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-5">
<span class="c-tabs__tab-text">2012</span>
</button>
<button class="c-tabs__tab" id="tab-6" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-6">
<span class="c-tabs__tab-text">2014</span>
</button>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/5/640/480" srcset="https://picsum.photos/id/5/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2010</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/125/640/480" srcset="https://picsum.photos/id/125/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2012</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/89/640/480" srcset="https://picsum.photos/id/89/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2014</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-4" role="tabpanel" tabindex="0" aria-labelledby="tab-4">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/67/640/480" srcset="https://picsum.photos/id/67/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2010</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-5" role="tabpanel" tabindex="0" aria-labelledby="tab-5">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/54/640/480" srcset="https://picsum.photos/id/54/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2012</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="c-tabs__tabpanel" id="tabpanel-6" role="tabpanel" tabindex="0" aria-labelledby="tab-6">
<div class="c-tabs__tabpanel-inner">
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img" src="https://picsum.photos/id/33/640/480" srcset="https://picsum.photos/id/33/640/480" sizes="100vw" loading="lazy" alt="" />
</div>
<div class="c-tabs__tabpanel-content o-paragraph">
<p class="c-tabs__tabpanel-title">Panel title 2014</p>
<div>
<ul>
<li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li>
<li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li>
<li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li>
<li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li>
<li>Per la prima volta iniziamo a guardare al modello B Corp.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="c-tabs c-tabs--timeline{% if modifier is defined %} {{ modifier }}{% endif %}">
<div class="c-tabs__tablist automatic" role="tablist" aria-labelledby="tablist-1">
{% for item in tabs %}
<button class="c-tabs__tab" id="{{ 'tab-' ~ loop.index }}" type="button" role="tab" aria-selected="true" aria-controls="{{ 'tabpanel-' ~ loop.index }}">
<span class="c-tabs__tab-text">{{ item.tabLabel }}</span>
</button>
{% endfor %}
</div>
{% for item in tabs %}
<div class="c-tabs__tabpanel" id="{{ 'tabpanel-' ~ loop.index }}" role="tabpanel" tabindex="0" aria-labelledby="{{ 'tab-' ~ loop.index }}">
<div class="c-tabs__tabpanel-inner">
{% if item.panel.image.src %}
<div class="c-tabs__tabpanel-img-container">
<img class="c-tabs__tabpanel-img"
src="{{ item.panel.image.src|default("") }}"
srcset="{{ item.panel.image.srcset|default("") }}"
sizes="100vw"
loading="lazy"
alt="{{ item.panel.image.alt|default("") }}" />
</div>
{% endif %}
<div class="c-tabs__tabpanel-content o-paragraph">
{% if item.panel.title %}
<p class="c-tabs__tabpanel-title">{{ item.panel.title }}</p>
{% endif %}
<div>{{ item.panel.body|raw }}</div>
</div>
</div>
</div>
{% endfor %}
</div>
{
"tabs": [
{
"tabLabel": "2010",
"panel": {
"title": "Panel title 2010",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/5/640/480",
"srcset": "https://picsum.photos/id/5/640/480",
"alt": ""
}
}
},
{
"tabLabel": "2012",
"panel": {
"title": "Panel title 2012",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/125/640/480",
"srcset": "https://picsum.photos/id/125/640/480",
"alt": ""
}
}
},
{
"tabLabel": "2014",
"panel": {
"title": "Panel title 2014",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/89/640/480",
"srcset": "https://picsum.photos/id/89/640/480",
"alt": ""
}
}
},
{
"tabLabel": "2010",
"panel": {
"title": "Panel title 2010",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/67/640/480",
"srcset": "https://picsum.photos/id/67/640/480",
"alt": ""
}
}
},
{
"tabLabel": "2012",
"panel": {
"title": "Panel title 2012",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/54/640/480",
"srcset": "https://picsum.photos/id/54/640/480",
"alt": ""
}
}
},
{
"tabLabel": "2014",
"panel": {
"title": "Panel title 2014",
"body": "<ul><li>A marzo, per i nostri 13 anni e dopo un anno di lavoro, annunciamo il cambio di brand in Tangible, con uno sforzo collettivo importante che contribuisce a unire il team.</li><li>Lanciamo il nuovo evento: il workshop Design Sprint con Jake Knapp di Google Ventures, a Bologna.</li><li>A giugno l'evento di Design Sprint è sold-out con oltre 100 persone da 12 nazioni diverse.</li><li>Dopo mesi di cantiere, a dicembre entriamo nel nuovo ufficio.</li><li>Per la prima volta iniziamo a guardare al modello B Corp.</li></ul>",
"image": {
"src": "https://picsum.photos/id/33/640/480",
"srcset": "https://picsum.photos/id/33/640/480",
"alt": ""
}
}
}
]
}
.c-tabs__tablist {
display: flex;
overflow-x: auto;
margin-bottom: spacing(space-24);
padding: spacing(space-24) 0;
}
.c-tabs__tab {
cursor: pointer;
background-color: transparent;
border: none;
padding: 0;
flex: 1 0 auto;
outline: none;
}
.c-tabs__tab + .c-tabs__tab {
margin-left: spacing(space-24);
@include min-screen(bp(large)) {
margin-left: spacing(space-80);
}
}
.c-tabs__tabpanel-title {
@include font-scale(level-5, $font-primary, extrabold);
color: useHSL(--primary-100);
margin-bottom: spacing(space-24);
}
.c-tabs__tab-text {
font-family: "Inter", sans-serif;
font-size: remify(20px);
line-height: 150%;
color: useHSL(--primary-100);
}
.c-tabs__tab[aria-selected="true"] .c-tabs__tab-text {
font-weight: bold;
border-bottom: remify(2px) solid useHSL(--accent-100);
}
.c-tabs__tabpanel {
padding: spacing(space-24) 0;
}
.c-tabs__tabpanel.is-hidden {
display: none;
}
/*------------------------------------*
Modifier: timeline
*------------------------------------*/
.c-tabs--timeline {
.c-tabs__tabpanel-inner {
@include min-screen(bp(large)) {
display: flex;
align-items: center;
}
}
.c-tabs__tabpanel-img-container {
text-align: center;
padding-right: spacing(space-48);
margin-bottom: spacing(space-48);
@include min-screen(bp(large)) {
flex: 0 1 60%;
margin-bottom: 0;
padding-right: spacing(space-96);
}
}
.c-tabs__tabpanel-content {
@include min-screen(bp(large)) {
flex: 1 1 40%;
}
}
}
No notes defined.