Es werden reguläre Bootstrap-Tabs verwendet.
// There's some Bootstrap variables for this but they're lacking a lot of stuff. I decided to move everything here
// before it becomes a terrible mix between this and the variables.
.nav-tabs {
border-color: $primary;
gap: $spacer * .5;
.nav-link {
align-items: center;
background-color: $primary;
border-color: $primary;
border-radius: 0;
border-width: $nav-tabs-border-width $nav-tabs-border-width 0 $nav-tabs-border-width;
color: #fff;
display: flex;
font-weight: 500;
height: calc(100% + 1px);
line-height: 1;
min-height: 3em;
max-width: 300px;
padding: $nav-link-padding-y $nav-link-padding-x;
text-align: center;
&:hover {
background-color: $gray-600;
border-color: $gray-600;
}
&.active {
background-color: #fff;
border-color: $primary;
color: $primary;
&:hover {
border-color: $primary;
}
}
}
}
.tab-content {
border-color: $primary;
border-style: solid;
border-width: 0 $nav-tabs-border-width $nav-tabs-border-width $nav-tabs-border-width;
padding: $spacer * 1.5;
}
// 2nd selector in case content has to be wrapped in some kind of container.
.tab-pane > :last-child,
.tab-pane > :last-child > :last-child {
margin-bottom: 0;
}
<ul class="nav nav-tabs" id="demo-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="analysis-tab" data-bs-toggle="tab" data-bs-target="#analysis-content" type="button" role="tab" aria-controls="analysis-content" aria-selected="true">
Analyse mit ganz schön viel Text und vielen weiteren Wörtern.
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="relevance-tab" data-bs-toggle="tab" data-bs-target="#relevance-content" type="button" role="tab" aria-controls="relevance-content" aria-selected="false">
Relevanz
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="measures-tab" data-bs-toggle="tab" data-bs-target="#measures-content" type="button" role="tab" aria-controls="measures-content" aria-selected="false">
Maßnahmen
</button>
</li>
</ul>
<div class="tab-content" id="demo-tabs-content">
<div class="tab-pane fade show active" id="analysis-content" role="tabpanel" aria-labelledby="analysis-tab" tabindex="0">
<strong>Analyse</strong><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab-pane fade" id="relevance-content" role="tabpanel" aria-labelledby="relevance-tab" tabindex="0">
<strong>Relevanz</strong><br>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab-pane fade" id="measures-content" role="tabpanel" aria-labelledby="measures-tab" tabindex="0">
<strong>Maßnahmen</strong><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>