HTML-Prototype der OTH-Regensburg

<nav class="c-jump-navigation" aria-label="Jump navigation">
  <button class="btn btn--icon-left c-jump-navigation__button" title="Sprungnavigation anzeigen/ausblenden" aria-expanded="false">
    <svg viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#icon-feather-list"></use>
    </svg>
    <svg class="c-jump-navigation__button-close" viewBox="0 0 26 26" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="Images/svg/sprite.symbol.svg#icon-close"></use>
    </svg><span class="u-ml-tiny">Inhalt</span>
  </button>
  <ul class="o-list-bare c-jump-navigation__list">
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#learning-content"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Lerninhalte</span></a></li>
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#career-opportunities"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Berufschancen</span></a></li>
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#build-and-modules"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Aufbau und Module</span></a></li>
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#study-and-organizational"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Studium und Organisatorisches</span></a></li>
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#apply"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Bewerben</span></a></li>
    <li class="c-jump-navigation__list-item"><a class="c-jump-navigation__link" href="#doctors"><span class="c-jump-navigation__link-icon-wrap">
          <svg class="c-jump-navigation__link-icon" viewBox="0 0 26 18" role="img" aria-hidden="true" focusable="false">
            <use xlink:href="Images/svg/sprite.symbol.svg#icon-arrow-down"></use>
          </svg></span><span class="c-jump-navigation__link-label">Dozent:innen</span></a></li>
  </ul>
</nav>