<div class="c-tabs">
<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">Maria Theresia Ahlefeldt</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">Carl Joachim Andersen</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-content o-paragraph">
<p class="c-tabs__tabpanel-title">Maria Theresia Ahlefeldt</p>
<div>
<p>Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. She was given good critic as a composer and described as a “<span lang='da'>virkelig Tonekunstnerinde</span>” ('a True Artist of Music').</p>
</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-content o-paragraph">
<div>
<p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. Both as a virtuoso and as composer of flute music, he is considered one of the best of his time. He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level.</p>
</div>
</div>
</div>
</div>
</div>
<div class="c-tabs{% 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">
<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": "Maria Theresia Ahlefeldt",
"panel": {
"title": "Maria Theresia Ahlefeldt",
"body": "<p>Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. She was given good critic as a composer and described as a “<span lang='da'>virkelig Tonekunstnerinde</span>” ('a True Artist of Music').</p>"
}
},
{
"tabLabel": "Carl Joachim Andersen",
"panel": {
"body": "<p>Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. Both as a virtuoso and as composer of flute music, he is considered one of the best of his time. He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level.</p>"
}
}
]
}
.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.