Skip to content

Footer

Der Footer bildet den Abschluss jeder Seite und dient als zentrale Navigationsfläche für ergänzende Informationen und sekundäre Interaktionen. Der Footer ist statisch und bleibt am Ende der Seite positioniert. In Fällen von sehr kurzen Seiteninhalten muss er dynamisch den unteren Bildschirmrand ausfüllen.

Der erweiterte Footer ist klar strukturiert und besteht aus mehreren Abschnitten. Links befindet sich der Bereich für Kontaktmöglichkeiten, der dynamisch an die jeweilige Inhaltsseite angepasst wird. Die drei weiteren Spalten sind den Kategorien „Die WKO“, „Wissen“ und „Service“ gewidmet und bieten Links zu wichtigen, aber nicht primären Inhalten.

<footer class="footer bg--grey-secondary">
  <div class="container">
    <div class="row">
      <div class="col-lg-9">
        <div class="row">
          <div class="col-md-4">
            <h4 class="border-bottom">Die WKO</h4>
            <ul class="p-0">
              <li><a href="#">Die Organisation</a></li>
              <li><a href="#">Unsere Mission</a></li>
              <li><a href="#">Wirtschaftskammerwahlen</a></li>
              <li><a href="#">Jobs und Karriere</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <h4 class="border-bottom">Wissen</h4>
            <ul class="p-0">
              <li><a href="#">Gewerbe anmelden</a></li>
              <li><a href="#">Wachsen</a></li>
              <li><a href="#">Netzwerken</a></li>
              <li><a href="#">Gewerbe stillegen</a></li>
              <li><a href="#">Hilfe und Beratung</a></li>
              <li><a href="#">Mein 1. Mitarbeiter</a></li>
              <li><a href="#">Lehrlinge ausbilden</a></li>
            </ul>
          </div>
          <div class="col-md-4">
            <h4 class="border-bottom">Service</h4>
            <ul class="p-0">
              <li><a href="#">Muster & Vorlagen</a></li>
              <li><a href="#">Kollektivverträge</a></li>
              <li><a href="#">Presse und Medien</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="quick-contact" class="col-lg-3 order-lg-first">
        <img src="/logo.svg" alt="Logo der Wirtschaftskammern Österreich" />
        <h4>Wirtschaftskammer Wien</h4>
        <select class="form-select" aria-label="Bundeslandkontakt wählen">
          <option value="blkontakt-oesterreich">Österreich</option>
          <option value="blkontakt-burgenland">Burgenland</option>
          <option value="blkontakt-kaernten">Kärnten</option>
          <option value="blkontakt-niederoesterreich">Niederösterreich</option>
          <option value="blkontakt-oberoesterreich">Oberösterreich</option>
          <option value="blkontakt-salzburg">Salzburg</option>
          <option value="blkontakt-steiermark">Steiermark</option>
          <option value="blkontakt-tirol">Tirol</option>
          <option value="blkontakt-vorarlberg">Vorarlberg</option>
          <option value="blkontakt-wien" selected>Wien</option>
        </select>
        <address>
          <div>
            <p><strong>Wirtschaftskammer Wien</strong></p>
            <p>Straße der Wiener Wirtschaft 1</p>
            <p>1020 Wien</p>
          </div>
          <div>
            <ul class="m-0 p-0 contacting">
              <li>
                <a href="tel:+43 2732 832 01 31090">
                  <svg class="icon icon-phone-21" role="img">
                    <title>Telefon</title>
                    <use
                      xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-phone-21"
                    ></use>
                  </svg>
                  +43 2732 832 01 31090
                </a>
              </li>
              <li>
                <a href="tel:+43 123 456 78">
                  <svg class="icon icon-fax" role="img">
                    <title>Fax</title>
                    <use
                      xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-fax"
                    ></use>
                  </svg>
                  +43 123 456 78
                </a>
              </li>
              <li>
                <a href="mailto:mailadresse@wkw.at">
                  <svg class="icon icon-envelope" role="img">
                    <title>E-Mail</title>
                    <use
                      xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-envelope"
                    ></use>
                  </svg>
                  mailadresse@wkw.at
                </a>
              </li>
              <li>
                <a href="https://wko.at/noe/baden">
                  <svg class="icon icon-www" role="img">
                    <title>Website</title>
                    <use
                      xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-www"
                    ></use>
                  </svg>
                  wko.at/noe/baden
                </a>
              </li>
              <li>
                <a href="#">
                  <svg class="icon icon-kontakt">
                    <use
                      xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-contact"
                    ></use>
                  </svg>
                  Kontaktformular
                </a>
              </li>
            </ul>
          </div>
          <p class="social-heading">Besuchen Sie uns auf:</p>
          <ul class="social-media-channels">
            <li>
              <a href="#" target="_blank" title="Facebook">
                <svg class="icon icon-facebook">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-facebook"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Instagram">
                <svg class="icon icon-insta">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-insta"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Twitter">
                <svg class="icon icon-twitter">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-twitter"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="LinkedIn">
                <svg class="icon icon-linkedin">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-linkedin"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Xing">
                <svg class="icon icon-xing">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-xing"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="YouTube">
                <svg class="icon icon-youtube">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-youtube"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Flickr">
                <svg class="icon icon-flickr">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-flickr"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Pinterest">
                <svg class="icon icon-pinterest">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-pinterest"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Skype">
                <svg class="icon icon-skype">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-skype"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Snapchat">
                <svg class="icon icon-snapchat">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-snapchat"
                  ></use>
                </svg>
              </a>
            </li>
            <li>
              <a href="#" target="_blank" title="Vimeo">
                <svg class="icon icon-vimeo">
                  <use
                    xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-vimeo"
                  ></use>
                </svg>
              </a>
            </li>
          </ul>
          <div>
            <a
              class="btn btn-link"
              href="#"
              data-gtm-event="kontaktinfo-details-link"
            >
              Details und Anfahrtsplan
              <svg class="icon icon-arrow-right">
                <use
                  xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
                ></use>
              </svg>
            </a>
          </div>
        </address>
      </div>
      <div class="col-12 p-3 pe-0 mt-3 border-top text-end">
        <ul class="footer-meta m-0 p-0">
          <li><a href="#">Mehrsprachige Info</a></li>
          <li>
            <a href="https://www.wko.at/offenlegung-oesterreich">Offenlegung</a>
          </li>
          <li>
            <a
              href="https://www.wko.at/barrierefreiheitserklaerung-wko-serviceportal"
              >Barrierefreiheit</a
            >
          </li>
          <li>
            <a href="https://www.wko.at/datenschutzerklaerung"
              >Datenschutzerklärung</a
            >
          </li>
          <li><a href="#" id="edit-cookiesettings">Cookie-Einstellungen</a></li>
          <li>
            ©
            <script type="text/javascript">
              document.write(new Date().getFullYear());
            </script>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Der Footer muss Links zu rechtlichen Informationen wie Datenschutzerklärung, Barrierefreiheit, Offenlegung, Cookie-Einstellungen und Copyright-Verweis enthalten, sowie optionale Links zur Mehrsprachigkeit.

<footer class="footer bg--grey-secondary small">
  <div class="container">
    <div class="row">
      <div class="col-12 p-3 pe-0 mt-3 border-top text-end">
        <ul class="footer-meta m-0 p-0">
          <li><a href="#">Mehrsprachige Info</a></li>
          <li>
            <a href="https://www.wko.at/offenlegung-oesterreich">Offenlegung</a>
          </li>
          <li>
            <a
              href="https://www.wko.at/barrierefreiheitserklaerung-wko-serviceportal"
              >Barrierefreiheit</a
            >
          </li>
          <li>
            <a href="https://www.wko.at/datenschutzerklaerung"
              >Datenschutzerklärung</a
            >
          </li>
          <li><a href="#" id="edit-cookiesettings">Cookie-Einstellungen</a></li>
          <li>
            ©
            <script type="text/javascript">
              document.write(new Date().getFullYear());
            </script>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>