<div class="c-tabs">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab1" checked="checked">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab2">
<input class="c-tabs__option" type="radio" name="payment-method" id="tab3">
<nav class="c-tabs__nav">
<label class="c-tabs__label" for="tab1">PayPal</label>
<label class="c-tabs__label" for="tab2">Kreditkarte</label>
<label class="c-tabs__label" for="tab3">Lastschrift</label>
</nav>
<figure class="c-tabs__content">
<div class="tab1">PayPal</div>
<div class="tab2">
<article class="c-teaser c-teaser--opener">
<div class="c-teaser__media">
<a href="#" class="c-teaser__link">
<picture>
<img src="https://via.placeholder.com/600x400" alt="">
</picture>
</a>
</div>
<div class="c-teaser__body">
<a href="#" class="c-teaser__link">
<div class="c-teaser__header">
<div class="c-teaser__kicker">
<span class="c-badge c-badge--user">AZ+</span>
<span class="c-badge c-badge--prop c-badge--prop-gallery">
12
</span>
<span class="c-badge">
Anzeige
</span>
Brandkatastrophe
</div>
<h2 class="c-teaser__title">Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
</div>
<div class="c-teaser__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A beatae debitis dolor, dolorem doloremque eaque esse fugit necessitatibus sit veritatis?</p>
</div>
</a>
</div>
<div class="c-teaser__footer">
<div class="c-teaser__meta">
<div class="c-meta">
<ul cLass="c-meta__list">
<li class="c-meta__item"><strong>Hildesheim</strong></li>
<li class="c-meta__item"><strong>von Johanna Elster</strong></li>
<li class="c-meta__item"><time title="Veröffentlicht am" itemprop="datePublished" datetime="28.04.2019">28.04.2019</time></li>
<li class="c-meta__item">Aktualisiert <span class="js-last-updated" data-tstamp="1566213446">
19.08.2019 - 13:17 Uhr
</span>
</li>
<li class="c-meta__item"><span title="Lesezeit"><i class="fa fa-book-open"></i> 10 Min.</span></li>
<li class="c-meta__item"> 9.523 Aufrufe</li>
</ul>
</div>
</div>
<div class="c-teaser__actions">
<button class="c-bookmark" title="Artikel merken">
<i class="far fa-bookmark c-bookmark__icon"></i>
</button>
</div>
</div>
</article>
</div>
<div class="tab3">Lastschrift</div>
</figure>
</div>
<div class="c-tabs">
{% for item in items %}
<input class="c-tabs__option" type="radio" name="{{ name }}"
id="tab{{ loop.index }}"{% if loop.index == 1 %} checked="checked"{% endif %}>
{% endfor %}
<nav class="c-tabs__nav">
{% for item in items %}
<label class="c-tabs__label" for="tab{{ loop.index }}">{{ item.label }}</label>
{% endfor %}
</nav>
<figure class="c-tabs__content">
<div class="tab1">PayPal</div>
<div class="tab2">
{% render '@teaser--opener' %}</div>
<div class="tab3">Lastschrift</div>
</figure>
</div>
{
"name": "payment-method",
"items": [
{
"id": "paypal",
"label": "PayPal"
},
{
"id": "credit",
"label": "Kreditkarte"
},
{
"id": "debit",
"label": "Lastschrift"
}
]
}
.c-tabs {
&__option,
&__content > div {
display: none;
}
&__content {
border-top: 2px solid $color-accent;
clear: both;
display: block;
margin-left: 0;
> div {
padding: 2em;
width: 100%;
}
}
&__label {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: $color-grey-light;
float: left;
padding: .5em 1em;
text-align: center;
&:active,
&:focus,
&:hover {
background-color: $color-grey-lightest;
}
@include grid-column(4);
@include grid-col-end();
@include font-bold();
@include breakpoint(large) {
@include grid-column(3);
@include grid-col-end();
}
}
}
#tab1:checked ~ .c-tabs__content .tab1,
#tab2:checked ~ .c-tabs__content .tab2,
#tab3:checked ~ .c-tabs__content .tab3 {
display: block;
}
#tab1:checked ~ .c-tabs__nav .c-tabs__label[for="tab1"],
#tab2:checked ~ .c-tabs__nav .c-tabs__label[for="tab2"],
#tab3:checked ~ .c-tabs__nav .c-tabs__label[for="tab3"] {
background-color: $color-accent;
color: $color-white;
position: relative;
}
#tab1:checked ~ .c-tabs__nav .c-tabs__label[for="tab1"]::after,
#tab2:checked ~ .c-tabs__nav .c-tabs__label[for="tab2"]::after,
#tab3:checked ~ .c-tabs__nav .c-tabs__label[for="tab3"]::after {
content: "";
display: block;
height: 2px;
left: 0;
position: absolute;
top: 100%;
width: 100%;
}
No notes defined.