<div class="calendar-banner">
  <div class="calendar-banner__icon"><svg class="icon icon--theatre" viewBox="0 0 200 200">
      <use xlink:href="#icon-theatre"></use>
    </svg></div>
  <div class="calendar-banner__main">
    <div class="calendar-banner__info">
      <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
          <use xlink:href="#icon-stopwatch"></use>
        </svg><span class="calendar-banner__info__text">17:00 Uhr</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">Stuttgart</span></div>
    </div><a class="calendar-banner__a" href="#">
      <div class="calendar-banner__headline">
        <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</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-3391-title">
        <title id="icon-3391-title">List</title>
        <use xlink:href="#icon-arrow-right"></use>
      </svg></a></div>
</div>

{
  "link": "#",
  "icon": "theatre",
  "headline": {
    "text": "Ich bin der Titel einer Veranstaltung",
    "level": 4,
    "size": 4
  },
  "info": [
    {
      "icon": "stopwatch",
      "text": "17:00 Uhr"
    },
    {
      "icon": "location",
      "text": "Stuttgart"
    }
  ],
  "iconButton": {
    "icon": "arrow-right",
    "secondary": true
  }
}

<div class="calendar-banner">
  <div class="calendar-banner__icon"><svg class="icon icon--performance" viewBox="0 0 200 200">
      <use xlink:href="#icon-performance"></use>
    </svg></div>
  <div class="calendar-banner__main">
    <div class="calendar-banner__info">
      <div class="calendar-banner__info__item"><svg class="icon icon--stopwatch" viewBox="0 0 200 200">
          <use xlink:href="#icon-stopwatch"></use>
        </svg><span class="calendar-banner__info__text">17:00 Uhr</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">Stuttgart</span></div>
    </div><a class="calendar-banner__a" href="#">
      <div class="calendar-banner__headline">
        <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
      </div>
      <div class="calendar-banner__text">Mit Anja Sommer</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-c448-title">
        <title id="icon-c448-title">List</title>
        <use xlink:href="#icon-arrow-right"></use>
      </svg></a></div>
</div>

{
  "link": "#",
  "icon": "performance",
  "headline": {
    "text": "Ich bin der Titel einer Veranstaltung",
    "level": 4,
    "size": 4
  },
  "info": [
    {
      "icon": "stopwatch",
      "text": "17:00 Uhr"
    },
    {
      "icon": "location",
      "text": "Stuttgart"
    }
  ],
  "iconButton": {
    "icon": "arrow-right",
    "secondary": true
  },
  "text": "Mit Anja Sommer"
}

<div class="calendar-banner calendar-banner--badge">
  <div class="calendar-banner__badge">Zusatztermin</div>
  <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--stopwatch" viewBox="0 0 200 200">
          <use xlink:href="#icon-stopwatch"></use>
        </svg><span class="calendar-banner__info__text">17:00 Uhr</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">Stuttgart</span></div>
      <div class="calendar-banner__info__badge">Für Kinder</div>
    </div><a class="calendar-banner__a" href="#">
      <div class="calendar-banner__headline">
        <h4 class="headline headline--4">Ich bin der Titel einer Veranstaltung</h4>
      </div>
      <div class="calendar-banner__text">Mit Anja Sommer</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-9747-title">
        <title id="icon-9747-title">List</title>
        <use xlink:href="#icon-arrow-right"></use>
      </svg></a></div>
</div>

{
  "link": "#",
  "icon": "reading",
  "headline": {
    "text": "Ich bin der Titel einer Veranstaltung",
    "level": 4,
    "size": 4
  },
  "info": [
    {
      "icon": "stopwatch",
      "text": "17:00 Uhr"
    },
    {
      "icon": "location",
      "text": "Stuttgart"
    }
  ],
  "iconButton": {
    "icon": "arrow-right",
    "secondary": true
  },
  "badge": "Zusatztermin",
  "text": "Mit Anja Sommer",
  "infoBadge": "Für Kinder"
}