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</h2>
        </header>
        <div class="c-teaser-container">
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Innovationen für Mittelstands und der Weltmarktführer</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/1/1080/1080" alt="Innovationen für Mittelstands und der Weltmarktführer"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Exzellente Lehre</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/3/1080/1080" alt="Exzellente Lehre"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Spitzenforschung</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/2/1080/1080" alt="Spitzenforschung"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Regionale Verantwortung</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/4/1080/1080" alt="Regionale Verantwortung"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Continuing Education und Lifelong Learning</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/5/1080/1080" alt="Continuing Education und Lifelong Learning"/></div>
          </div>
          <div class="c-teaser">
            <!-- Grid/ Element header-->
            <header class="frame__header">
              <h4>Globale Community und internationale Kooperationen</h4>
            </header><a class="btn btn--primary btn--large" href="#">Mehr erfahren</a>
            <div class="c-teaser__image"><img src="https://placeholder2.in2code.de/images/work/6/1080/1080" alt="Globale Community und internationale Kooperationen"/></div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>