<div class="calendar-teaser">
<div class="calendar-teaser__inner">
<div class="calendar-teaser__headline">
<h2 class="headline headline--1"><span class="f-w-normal">Veranstaltungen mit</span> <br /> Anja Sommer</h2>
</div>
<div class="calendar-teaser__items">
<div class="calendar-teaser__item">
<div class="calendar-banner">
<div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg></div>
<div class="calendar-banner__main">
<div class="calendar-banner__info">
<div class="calendar-banner__info__item"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="calendar-banner__info__text">01.05. - 14.05.2022</span></div>
<div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-banner__info__text">Freiburg <span>|</span> Lesung</span></div>
</div><a class="calendar-banner__a" href="#">
<div class="calendar-banner__headline">
<h4 class="headline headline--4">Das Gruseln im Sommerschloss</h4>
</div>
</a>
</div>
<div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-c4de-title">
<title id="icon-c4de-title">List</title>
<use xlink:href="#icon-arrow-right"></use>
</svg></a></div>
</div>
</div>
<div class="calendar-teaser__item">
<div class="calendar-banner">
<div class="calendar-banner__icon"><svg class="icon icon--reading" viewBox="0 0 200 200">
<use xlink:href="#icon-reading"></use>
</svg></div>
<div class="calendar-banner__main">
<div class="calendar-banner__info">
<div class="calendar-banner__info__item"><svg class="icon icon--calendar" viewBox="0 0 200 200">
<use xlink:href="#icon-calendar"></use>
</svg><span class="calendar-banner__info__text">30.05.2022</span></div>
<div class="calendar-banner__info__item"><svg class="icon icon--location" viewBox="0 0 200 200">
<use xlink:href="#icon-location"></use>
</svg><span class="calendar-banner__info__text">Freiburg <span>|</span> Lesung</span></div>
</div><a class="calendar-banner__a" href="#">
<div class="calendar-banner__headline">
<h4 class="headline headline--4">Stuttgart bei Nacht</h4>
</div>
</a>
</div>
<div class="calendar-banner__button"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--arrow-right icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1dbc-title">
<title id="icon-1dbc-title">List</title>
<use xlink:href="#icon-arrow-right"></use>
</svg></a></div>
</div>
</div>
</div>
<div class="calendar-teaser__button"><a class="button button--primary" href="#"><span class="button__text">Zum Kalender</span></a></div>
</div>
</div>
{
"headline": {
"text": "#[span.f-w-normal Veranstaltungen mit] #[br] Anja Sommer\n",
"level": 2,
"size": 1
},
"button": {
"text": "Zum Kalender"
},
"items": [
{
"use": "calendar-banner",
"settings": {
"icon": "reading",
"headline": {
"text": "Das Gruseln im Sommerschloss"
},
"info": [
{
"icon": "calendar",
"text": "01.05. - 14.05.2022"
},
{
"icon": "location",
"text": "Freiburg | Lesung"
}
]
}
},
{
"use": "calendar-banner",
"settings": {
"icon": "reading",
"headline": {
"text": "Stuttgart bei Nacht"
},
"info": [
{
"icon": "calendar",
"text": "30.05.2022"
},
{
"icon": "location",
"text": "Freiburg | Lesung"
}
]
}
}
]
}