HTML-Prototype Schulpaket

<nav class="c-quick-navigation">
  <ul class="c-quick-navigation__list o-list-bare o-grid o-grid-1-1 o-grid-1-1-1@tablet o-grid-1-1-1-1@desktop">
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon lock-closed</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#lock-closed"></use>
        </svg><span class="c-quick-navigation__label">Interner Bereich</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon phone</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#phone"></use>
        </svg><span class="c-quick-navigation__label">Kontakt</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon calendar-days</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#calendar-days"></use>
        </svg><span class="c-quick-navigation__label">Termine</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon downloads</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#downloads"></use>
        </svg><span class="c-quick-navigation__label">Formulare &amp; Downloads</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon sun</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#sun"></use>
        </svg><span class="c-quick-navigation__label">Ganztagsschule</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon heart</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#heart"></use>
        </svg><span class="c-quick-navigation__label">Mensa</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon info</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#info"></use>
        </svg><span class="c-quick-navigation__label">Corona-Infos</span></a></li>
    <li class="c-quick-navigation__item"><a class="c-quick-navigation__link" href="#">
        <svg class="c-quick-navigation__icon" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
          <title>Icon user-group</title>
          <use xlink:href="Images/svg/sprite.symbol.svg#user-group"></use>
        </svg><span class="c-quick-navigation__label">Willkommenklasse für ukr. Kinder</span></a></li>
  </ul>
</nav>