HTML-Prototype von TUM Campus Heilbronn

<!-- Grid/ Element container-->
<div class="frame frame-type-buttons frame-space-before-medium" id="c52234">
  <!-- Grid/ Element header-->
  <header class="frame__header">
    <h2>Key facts</h2>
  </header>
  <div class="c-keyfacts flex">
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-burger"></use>
      </svg><b>Burger</b><span>icon-burger</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-calendar"></use>
      </svg><b>Calendar</b><span>icon-calendar</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-left"></use>
      </svg><b>Chevron left</b><span>icon-chevron-left</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-chevron-right"></use>
      </svg><b>Chevron right</b><span>icon-chevron-right</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download"></use>
      </svg><b>Download</b><span>icon-download</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-instagram"></use>
      </svg><b>Instagram</b><span>icon-instagram</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-search"></use>
      </svg><b>Search</b><span>icon-search</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-tag"></use>
      </svg><b>Tag</b><span>icon-tag</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-venue"></use>
      </svg><b>Venue</b><span>icon-venue</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-quote"></use>
      </svg><b>Quote</b><span>icon-quote</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-application"></use>
      </svg><b>Application</b><span>icon-application</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-book"></use>
      </svg><b>Book</b><span>icon-book</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-career"></use>
      </svg><b>On site</b><span>icon-career</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-certificate"></use>
      </svg><b>Certificate</b><span>icon-certificate</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-clock"></use>
      </svg><b>Clock</b><span>icon-clock</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-date"></use>
      </svg><b>Date</b><span>icon-date</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-degree"></use>
      </svg><b>Degree</b><span>icon-degree</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-download-2"></use>
      </svg><b>Download 2</b><span>icon-download-2</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-euro"></use>
      </svg><b>Euro</b><span>icon-euro</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-external"></use>
      </svg><b>External Link</b><span>icon-external</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-favorite"></use>
      </svg><b>Favorite</b><span>icon-favorite</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-home"></use>
      </svg><b>Home</b><span>icon-home</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-hourglass"></use>
      </svg><b>Duration</b><span>icon-hourglass</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-language"></use>
      </svg><b>Language</b><span>icon-language</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-location"></use>
      </svg><b>Location</b><span>icon-location</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-mail"></use>
      </svg><b>Mail</b><span>icon-mail</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-phone"></use>
      </svg><b>Phone</b><span>icon-phone</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-requirements"></use>
      </svg><b>Requirements</b><span>icon-requirements</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-flyer"></use>
      </svg><b>Flyer</b><span>icon-flyer</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-menu"></use>
      </svg><b>Menu</b><span>icon-menu</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-discount"></use>
      </svg><b>Discount</b><span>icon-discount</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-start"></use>
      </svg><b>Start</b><span>icon-start</span>
    </div>
    <div class="keyfact flex__5 flex__md-4 flex__lg-3">
      <svg width="55" height="55" viewBox="0 0 44 44" aria-hidden="true" focusable="false">
        <use xlink:href="Images/svg/sprite.symbol.svg#icon-screen"></use>
      </svg><b>Online</b><span>icon-screen</span>
    </div>
  </div>
</div>