Skip to content

Kontakt Box

Die Kontakbox spielt eine entscheidende Rolle, um die Kommunikation zwischen der Organisation und Nutzern zu erleichtern, die Benutzerfreundlichkeit zu verbessern und das Vertrauen der Besucher zu stärken.

Die Kontaktbox kann mehrere Zustände haben, eine davon ist die ohne Consent.

Kontakt

Bundesland auswählen

Wählen Sie ein Bundesland, um Kontakt-Informationen anzuzeigen.

<div class="card card-contactbox bg--brown-secondary">
  <h4 class="card-header mb-0">Kontakt</h4>
  <div class="card-body">
    <p><strong>Bundesland auswählen</strong></p>
    <p>Wählen Sie ein Bundesland, um Kontakt-Informationen anzuzeigen.</p>
    <div class="card-links">
      <ul class="m-0 p-0 contacting list-states">
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Burgenland
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Kärntnen
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Niederösterreich
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Oberösterreich
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Salzburg
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Steiermark
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Tirol
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Vorarlberg
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-arrow-right">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
              ></use>
            </svg>
            Wien
          </a>
        </li>
      </ul>
    </div>
  </div>
  <svg class="icon icon-kontakt">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-kontakt"></use>
  </svg>
</div>

Nicht angemeldet

Die Kontaktbox wenn dem Consent zugestimmt wurde, Benutzer auf der Website aber nicht angemeldet sind:

<div class="card card-contactbox bg--brown-secondary">
  <h4 class="card-header mb-0">Kontakt</h4>
  <div class="card-body">
    <h5 class="card-title">Service Center</h5>
    <address>
      <p>Straße der Wiener Wirtschaft 1</p>
      <p>1020 Wien</p>
    </address>
    <div class="card-links">
      <ul class="m-0 p-0 contacting">
        <li>
          <a href="tel:+43 2742 851 15899">
            <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 2742 851 15899
          </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:krems@wknoe.at">
            <svg class="icon icon-envelope" role="img">
              <title>E-Mail</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-envelope"
              ></use>
            </svg>
            krems@wknoe.at
          </a>
        </li>
        <li>
          <a href="https://wko.at">
            <svg class="icon icon-www" role="img">
              <title>Website</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-www"
              ></use>
            </svg>
            wko.at
          </a>
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Rückruf</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Termin</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Live-Chat</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>
      <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">
      Detailierte Kontaktseite
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
    </a>
  </div>
  <svg class="icon icon-kontakt">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-kontakt"></use>
  </svg>
</div>

Angemeldet

Die Kontaktbox wenn Benutzer angemeldet sind und alle Möglichkeiten der Kontaktaufnahme offen sind:

<div class="card card-contactbox bg--brown-secondary">
  <h4 class="card-header mb-0">Kontakt</h4>
  <div class="card-body">
    <h5 class="card-title">Service Center</h5>
    <address>
      <p>Straße der Wiener Wirtschaft 1</p>
      <p>1020 Wien</p>
    </address>
    <div class="card-links">
      <ul class="m-0 p-0 contacting">
        <li>
          <a href="tel:+43 2742 851 15899">
            <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 2742 851 15899
          </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:krems@wknoe.at">
            <svg class="icon icon-envelope" role="img">
              <title>E-Mail</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-envelope"
              ></use>
            </svg>
            krems@wknoe.at
          </a>
        </li>
        <li>
          <a href="https://wko.at">
            <svg class="icon icon-www" role="img">
              <title>Website</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-www"
              ></use>
            </svg>
            wko.at
          </a>
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-headphones">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-headphones"
              ></use></svg
            >Rückruf buchen</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-date">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-date"
              ></use></svg
            >Online Termin buchen</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-chat">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-chat"
              ></use></svg
            >Live-Chat starten</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>
      <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">
      Detailierte Kontaktseite
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
    </a>
  </div>
  <svg class="icon icon-kontakt">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-kontakt"></use>
  </svg>
</div>

Kontaktbox mit Select

Aufgrund der Vielfalt bestimmter Organisationseinheiten existiert eine spezielle Variante, bei der mittels eines Dropdown-Menüs die Anzeige der Kontaktdaten gesteuert werden kann.

Kontakt

Wählen Sie ein Aussenwirtschafts Center, um Kontakt-Informationen anzuzeigen.

Außenwirtschafts Center
Detailierte Kontaktseite 
<div class="card card-contactbox bg--brown-secondary">
  <h4 class="card-header mb-0">Kontakt</h4>
  <div class="card-body">
    <p>
      Wählen Sie ein Aussenwirtschafts Center, um Kontakt-Informationen
      anzuzeigen.
    </p>
    <select
      class="form-select rounded-0 mb-3"
      aria-label="Außenwirtschafts Center wählen"
      data-gtm-event="kontaktinfo-awcenterauswahl"
    >
      <option value="awcenter-newyork">New York</option>
      <option value="awcenter-losangeles">Los Angeles</option>
    </select>
    <h5 class="card-title">Außenwirtschafts Center</h5>
    <div class="card-links">
      <ul class="m-0 p-0 contacting">
        <li>
          <a href="tel:+43 123 456">
            <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 123 456
          </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:mail@wko.at">
            <svg class="icon icon-envelope" role="img">
              <title>E-Mail</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-envelope"
              ></use>
            </svg>
            mail@wko.at
          </a>
        </li>
        <li>
          <a href="https://wko.at">
            <svg class="icon icon-www" role="img">
              <title>Website</title>
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-www"
              ></use>
            </svg>
            wko.at
          </a>
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Rückruf</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Termin</a
          >
        </li>
        <li>
          <a href="#"
            ><svg class="icon icon-lock">
              <use
                xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-lock"
              ></use></svg
            >Live-Chat</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>
      <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">
      Detailierte Kontaktseite
      <svg class="icon icon-arrow-right">
        <use
          xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-arrow-right"
        ></use>
      </svg>
    </a>
  </div>
  <svg class="icon icon-kontakt">
    <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-kontakt"></use>
  </svg>
</div>