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 frame--full frame--background frame--blue-dark-301" id="c000002">
      <!-- Grid/ Element container-->
      <div class="frame frame-type-frame frame--default" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Cards" - in 50-50 grid</h2>
        </header>
        <div class="flex">
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-cards">
                <div class="c-teaser-card c-teaser-card--green"><a class="c-teaser-card__link" href="#" title="Innovationen für Mittelstands und der Weltmarktführer"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--green">
                    <p class="c-teaser-card__bodytext">Wir sind ein verlässlicher Partner des Mittelstands und der Weltmarktführer in der Region Heilbronn-Franken. Gemeinsam mit Unternehmen entwickeln wir Innovationen, die Wettbewerbsfähigkeit stärken und nachhaltige Impulse für den Wirtschaftsstandort setzen.</p>
                    <div class="c-teaser-card__color c-teaser-card--green"></div>
                  </div>
                </div>
                <div class="c-teaser-card c-teaser-card--orange-light"><a class="c-teaser-card__link" href="#" title="Exzellente Lehre"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Exzellente Lehre</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--orange-light">
                    <p class="c-teaser-card__bodytext">Wir bilden Fach- und Führungskräfte praxisnah und unternehmerisch aus. Mit Studiengängen der TUM School of Computation, Information and Technology sowie der TUM School of Management bereiten wir Studierende gezielt auf die Anforderungen der Arbeitswelt vor.</p>
                    <div class="c-teaser-card__color c-teaser-card--orange-light"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex__md-6">
            <!-- Grid/ Element container-->
            <div class="frame frame-type-frame frame--small" id="c">
              <div class="c-teaser-cards">
                <div class="c-teaser-card c-teaser-card--yellow"><a class="c-teaser-card__link" href="#" title="Regionale Verantwortung"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Regionale Verantwortung</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--yellow">
                    <p class="c-teaser-card__bodytext">Wir sind eng mit der Region Heilbronn-Franken vernetzt und fördern den Austausch zwischen Wirtschaft, Politik und Gesellschaft. So treiben wir Innovation, Bildung und Wissens- sowie Technologietransfer aktiv voran.</p>
                    <div class="c-teaser-card__color c-teaser-card--yellow"></div>
                  </div>
                </div>
                <div class="c-teaser-card c-teaser-card--orange"><a class="c-teaser-card__link" href="#" title="Continuing Education und Lifelong Learning"></a>
                  <div class="c-teaser-card__head">
                    <!-- Grid/ Element header-->
                    <header class="frame__header">
                      <h4>Continuing Education und Lifelong Learning</h4>
                    </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/>
                  </div>
                  <div class="c-teaser-card__bottom c-teaser-card--orange">
                    <p class="c-teaser-card__bodytext">Wir entwickeln praxisnahe Weiterbildungsformate, die Unternehmen und Fachkräfte fit für die Herausforderungen des digitalen Zeitalters machen – in enger Verbindung von wissenschaftlicher Exzellenz und wirtschaftlicher Praxis.</p>
                    <div class="c-teaser-card__color c-teaser-card--orange"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>