Icon-Link @link-list
<div class="link-list">
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
<li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
</ul>
</div>{
"items": [
{
"right": null,
"left": true,
"link": "#",
"icon": "arrow-right",
"text": "Kurzfilmwettbewerb „Smart. Ohne Phone startet“"
},
{
"right": null,
"left": true,
"link": "#",
"icon": "arrow-right",
"text": "Stiftungsprogramm verbessert Integration in Baden-Württemberg"
},
{
"right": null,
"left": true,
"link": "#",
"icon": "arrow-right",
"text": "Ausschreibung Lehrerpreis der Stiftung der Kinderland"
}
]
}
Right @link-list--right
<div class="link-list link-list--right">
<div class="text link-list__text">
<p>Ich bin ein Freitext</p>
</div>
<ul class="link-list__list">
<li class="link-list__item"><a class="icon-link icon-link--right" href="#"><span class="icon-link__text">Link 1</span><span class="icon-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
<li class="link-list__item"><a class="icon-link icon-link--right" href="#"><span class="icon-link__text">Link 2</span><span class="icon-link__icon"><svg class="icon icon--chevron-right" viewBox="0 0 200 200">
<use xlink:href="#icon-chevron-right"></use>
</svg></span></a></li>
<li class="link-list__item"><a class="icon-link icon-link--right" href="#" rel="noopener noreferrer" target="_blank"><span class="icon-link__text">Link 3</span><span class="icon-link__icon"><svg class="icon icon--arrow-external" viewBox="0 0 200 200">
<use xlink:href="#icon-arrow-external"></use>
</svg></span></a></li>
</ul>
</div>{
"items": [
{
"link": "#",
"icon": "chevron-right",
"text": "Link 1"
},
{
"link": "#",
"icon": "chevron-right",
"text": "Link 2"
},
{
"external": true,
"link": "#",
"icon": "arrow-external",
"text": "Link 3"
}
],
"right": true,
"text": {
"content": "p Ich bin ein Freitext\n"
}
}
Headline @link-list--headline
<div class="link-list">
<h2 class="headline headline--5 link-list__headline">Weiterführende Informationen</h2>
<ul class="link-list__list">
<li class="link-list__item"><a class="link" href="#">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</a></li>
<li class="link-list__item"><a class="link" href="#">Stiftungsprogramm verbessert Integration in Baden-Württemberg</a></li>
<li class="link-list__item"><a class="link" href="#">Ausschreibung Lehrerpreis der Stiftung der Kinderland</a></li>
</ul>
</div>{
"items": [
{
"link": "#",
"icon": null,
"text": "Kurzfilmwettbewerb „Smart. Ohne Phone startet“"
},
{
"link": "#",
"icon": null,
"text": "Stiftungsprogramm verbessert Integration in Baden-Württemberg"
},
{
"link": "#",
"icon": null,
"text": "Ausschreibung Lehrerpreis der Stiftung der Kinderland"
}
],
"headline": {
"text": "Weiterführende Informationen",
"level": 2
}
}