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--small" id="c">
        <!-- Grid/ Element header-->
        <header class="frame__header">
          <h2>Teaser "Cards" - grid with 4 cards</h2>
        </header>
        <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 class="c-teaser-card c-teaser-card--state-blue"><a class="c-teaser-card__link" href="#" title="Spitzenforschung"></a>
            <div class="c-teaser-card__head">
              <!-- Grid/ Element header-->
              <header class="frame__header">
                <h4>Spitzenforschung</h4>
              </header><img class="c-teaser-card__image" src="https://placeholder2.in2code.de/images/work/2/1080/1080" alt="Spitzenforschung"/>
            </div>
            <div class="c-teaser-card__bottom c-teaser-card--state-blue">
              <p class="c-teaser-card__bodytext">Am TUM Campus Heilbronn steht interdisziplinäre Forschung zu den Chancen des digitalen Zeitalters im Fokus. Wir verbinden wissenschaftliche Exzellenz mit wirtschaftlicher und gesellschaftlicher Relevanz.</p>
              <div class="c-teaser-card__color c-teaser-card--state-blue"></div>
            </div>
          </div>
          <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>
      </div>
    </div>
  </main>
</div>