<section class="section-wrapper tabs-section">
<div class="container">
<div class="tabs" data-mobile-hidden>
<!-- tab navigation -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false">Tab active</a></li>
<li class="nav-item"><a class="nav-link active" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">tab inactive</a></li>
</ul>
<!-- tab content -->
<div class="tab-content" id="">
<div class="tab-pane fade" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<div class="label-text ">
<dt class="text-label">Kompetenzstufe</dt>
<dd class="text-value">C Profis</dd>
</div>
</div>
<div class="tab-pane fade show active" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
<div class="label-text ">
<dt class="text-label">Kompetenzstufe</dt>
<dd class="text-value">C Profis</dd>
</div>
</div>
</div>
</div>
<div class="tabs-mobile">
<div id="tab-list-accordion" class="accordion">
<div class="accordion-item">
<div class="accordion-head title-class-h3 " id="tab-list-accordion-head" data-toggle="collapse" data-target="#tab-list-accordion-body" aria-expanded="false" aria-controls="tab-list-accordion-body">
<h3>lorem ipsum 1</h3>
<p></p>
<div class="accordion-head-toggle">
<svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
<path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="accordion-body collapse" id="tab-list-accordion-body" aria-labelledby="tab-list-accordion-head">
<div class="accordion-body-inner">
<div class="accordion-lead-text"></div>
<div class="label-text ">
<dt class="text-label">Kompetenzstufe</dt>
<dd class="text-value">C Profis</dd>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-head title-class-h3 " id="tab-list-accordion-head2" data-toggle="collapse" data-target="#tab-list-accordion-body2" aria-expanded="true" aria-controls="tab-list-accordion-body2">
<h3>lorem ipsum 2</h3>
<p></p>
<div class="accordion-head-toggle">
<svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
<path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="accordion-body collapse show" id="tab-list-accordion-body2" aria-labelledby="tab-list-accordion-head2">
<div class="accordion-body-inner">
<div class="accordion-lead-text"></div>
<div class="label-text ">
<dt class="text-label">Kompetenzstufe</dt>
<dd class="text-value">C Profis</dd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-wrapper tabs-section">
<div class="container">
{{ title }}
{% render "@components/02-components/tabs/tabs.twig" with {
items: items,
mobile_accordion: mobile_accordion,
accordion_id: accordion_id
} %}
</div>
</section>
{
"printable": 0,
"mobile_accordion": true,
"accordion_id": "tab-list-accordion",
"items": [
{
"item": null,
"tab_id": "tab1",
"tab_title": "Tab active",
"tab_active": false,
"tab_content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
},
"tab_content_mobile": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
},
"parent": "tab-list-accordion",
"head_id": "tab-list-accordion-head",
"body_id": "tab-list-accordion-body",
"active": false,
"title": "lorem ipsum 1",
"content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
}
},
{
"item": null,
"tab_id": "tab2",
"tab_title": "tab inactive",
"tab_active": true,
"tab_content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
},
"tab_content_mobile": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
},
"parent": "tab-list-accordion",
"head_id": "tab-list-accordion-head2",
"body_id": "tab-list-accordion-body2",
"active": true,
"title": "lorem ipsum 2",
"content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
}
}
],
"tabs": {
"items": [
{
"item": null,
"tab_id": "tab1",
"tab_title": "Tab active",
"tab_active": true,
"tab_content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
}
},
{
"item": null,
"tab_id": "tab2",
"tab_title": "Tab inactive",
"tab_active": false,
"tab_content": {
"$collection": {
"items": [
{
"$label-text": {
"label": "Kompetenzstufe",
"value": "C Profis"
}
}
]
}
}
}
]
}
}
.tabs-section {
//padding-top: 0;
padding-bottom: 0;
padding-top: 0;
overflow: visible;
@include media-breakpoint-up(md) {
padding-top: 0;
padding-bottom: 0;
margin-top: 15rem;
margin-top: 4rem;
margin-bottom: 10rem;
background: $color-light-grey;
padding-bottom: 0;
}
.tabs {
transform: translateY(-5rem);
margin-bottom: 0;
.nav-tabs {
.nav-link {
height: 5rem;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
}
}
}
}
There are no notes for this item.