Gruppe @group
Funktionsleiste - Drucken + Teilen @group--icon-button-group-dt
Funktionsleiste - Drucken + Teilen + RSS @group--icon-button-group-dtr
Funktionsleiste - Eintragen + Drucken + Teilen + RSS @group--icon-button-group-edtr
Funktionsleiste - Eintragen + Drucken + Teilen @group--icon-button-group-edt
Slider-Kontrolle @group--slider-control
<!-- Slider-Kontrolle -->
<div class="group group--narrow">
<ul class="group__list">
<li class="group__item">
<button class="icon-button" title="Vorheriger Slide" type="button"><span class="icon-button__text u-hidden-visually">Vorheriger Slide</span><span class="icon-button__circle"><svg class="icon icon--prev icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-prev"></use>
</svg></span></button>
</li>
<li class="group__item">
<button class="icon-button" title="Slider pausieren" type="button"><span class="icon-button__text u-hidden-visually">Slider pausieren</span><span class="icon-button__circle"><svg class="icon icon--play icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-play"></use>
</svg></span></button>
</li>
<li class="group__item">
<button class="icon-button" title="Nächster Slide" type="button"><span class="icon-button__text u-hidden-visually">Nächster Slide</span><span class="icon-button__circle"><svg class="icon icon--next icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-next"></use>
</svg></span></button>
</li>
</ul>
</div>{
"groupOf": "icon-button",
"narrow": true,
"items": [
{
"title": "Vorheriger Slide",
"icon": "prev"
},
{
"title": "Slider pausieren",
"icon": "play"
},
{
"title": "Nächster Slide",
"icon": "next"
}
]
}
Tag-Gruppe @group--tag-group
<!-- Tag-Gruppe -->
<div class="group">
<ul class="group__list">
<li class="group__item">
<a class="tag tag--primary" href="#">Forschung</a>
</li>
<li class="group__item">
<a class="tag tag--primary" href="#">Publikation</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Naturwissenschaften</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Biologie</a>
</li>
<li class="group__item">
<a class="tag tag--u-natfak1" href="#">Zoologie</a>
</li>
</ul>
</div>{
"groupOf": "tag",
"items": [
{
"link": "#",
"text": "Forschung",
"primary": true
},
{
"link": "#",
"text": "Publikation",
"primary": true
},
{
"link": "#",
"text": "Naturwissenschaften",
"unit": "natfak1"
},
{
"link": "#",
"text": "Biologie",
"unit": "natfak1"
},
{
"link": "#",
"text": "Zoologie",
"unit": "natfak1"
}
]
}
Tag-Gruppe mit Label @group--tag-group-with-label
<!-- Tag-Gruppe mit Label -->
<div class="group">
<div class="group__label" id="group-8127-label">Stichworte</div>
<ul class="group__list" aria-labelledby="group-8127-label">
<li class="group__item">
<a class="tag tag--u-verwaltung" href="#">Verwaltung</a>
</li>
<li class="group__item">
<a class="tag tag--u-theologie" href="#">Theologie</a>
</li>
<li class="group__item">
<a class="tag tag--u-philfak3" href="#">Pädagogik</a>
</li>
</ul>
</div>{
"groupOf": "tag",
"items": [
{
"link": "#",
"unit": "verwaltung",
"text": "Verwaltung"
},
{
"link": "#",
"unit": "theologie",
"text": "Theologie"
},
{
"link": "#",
"unit": "philfak3",
"text": "Pädagogik"
}
],
"label": "Stichworte"
}