HTML-Prototype von TUM Campus Heilbronn

<div class="page">
  <main class="page__content">
    <!-- Grid/ Element container-->
    <div class="frame frame-type-container frame-space-before-none" id="c000001">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Events</h2>
        </header>
        <div class="c-event-list-filter">
          <label class="u-visually-hidden" for="event-filter">Filter auswählen</label>
          <select name="event-filter" id="event-filter">
            <option value="">Filter auswählen</option>
            <option value="januar">Januar</option>
            <option value="februar">Februar</option>
          </select>
        </div>
        <div class="c-event-list"><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">25</div>
              <div class="c-event-list-item__month">Mär 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Bürger-Uni</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">01</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Bachelor in Information Engineering - Info Session</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">07</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Schlaue Mittagspause: KI-Fachkräfte rekrutieren</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">07</div>
              <div class="c-event-list-item__month">Mär 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Master in Information Engineering - Info Session</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">10</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Welcome Day Sommersemester 2026</div>
            </div></a><a class="c-event-list-item" href="#">
            <div class="c-event-list-item__date">
              <div class="c-event-list-item__day">17</div>
              <div class="c-event-list-item__month">Apr 2025</div>
            </div>
            <div class="c-event-list-item__content">
              <div class="c-event-list-item__heading">Einführung in die TUM Universitätsbibliothek (Heilbronn)</div>
            </div></a>
        </div><a class="c-event-list-button btn btn--primary btn--large" href="#">Alle Events</a>
      </div>
    </div>
  </main>
</div>