Kontakt

In der Standard-Variante steht der Kontakt immer am Ende einer Seite in einer Card. Beispiel der Positionierung
In Ausnahmefällen kann es auch eine 2. Kontaktmöglichkeit geben, siehe Variante "Kontakt innerhalb der Seite"
Folgende Elemente können Sie variabel je nach Bedarf einsetzen (Ohne Icons! Ausnahme: Social Media Kanäle):
- Überschrift (Default "Kontakt", beim Stadtservice und der wien.gv.at Redaktion "Noch Fragen?" als Alternative, optional Freitextfeld)
- Kontaktbezeichnung
  Beispiele: Kund*innen-Service der Wiener Bäder, Servicestelle Stadtplanung, wien.gv.at Redaktion, Stadtservice, Abteilungsbezeichnungen wie: "Stadt Wien – Klima, Forst- und Landwirtschaftsbetrieb (MA 49)" et cetera
- Freies Textfeld
  Für "Das Stadtservice hilft Ihnen gerne!" oder andere Zusatzinfo
- Adresse (verlinkt immer auf den Stadtplan)
- E-Mail (es wird empfohlen, statt einer E-Mail-Adresse ein Kontaktformular zu verwenden)
- Kontaktformular
- Telefonnummer
- Fax
- Website-Link
- Social Media Kanäle (Icons)

Varianten

Kontakt Standard

Vorschau

Kontakt

Servicestelle XYZ

Telefon: +43 1 4000-xxxx
Website: Zuständigkeit und Öffnungszeiten
Kontaktformular

Unser Newsletter informiert Sie über Veranstaltungen, Publikationen und Neuigkeiten in den Bereichen Statistik und Innovation.

Code

<wm-section highlight="true">
  <wm-grid size="l">
    <wm-card size="l">
      <h2 slot="heading">Kontakt</h2>
      <div slot="content">
        <address>
          <strong>Servicestelle XYZ</strong>
          <p style="margin-top: 1rem;">
            Telefon: <a href="tel:004314000xxxx">+43 1 4000-xxxx</a><br>
            Website: <a href="#">Zuständigkeit und Öffnungszeiten</a><br>
            <a href="#">Kontaktformular</a>
          </p>
        </address>
        <wm-list type="horizontal" gap="m">
          <ul>
            <li>
              <a href="#" class="wm-no-external-icon">
                <wm-icon iconid="instagram" width="35">Instagram</wm-icon>
              </a>
            </li>
            <li>
              <a href="#" class="wm-no-external-icon">
                <wm-icon iconid="facebook" width="35">Facebook</wm-icon>
              </a>
            </li>
          </ul>
        </wm-list>
      </div>
    </wm-card>
    <wm-card size="l">
      <h2 slot="heading">Newsletter</h2>
      <div slot="content">
        <p>Unser Newsletter informiert Sie über Veranstaltungen, Publikationen und Neuigkeiten in den Bereichen Statistik und Innovation.</p>
      </div>
      <div slot="postcontent">
        <wm-button  full="true" kind="primary" color="frischgruen" alignment="center">
          <a href="#" class="wm-e-button">Abonnieren</a>
        </wm-button>
      </div>
    </wm-card>
  </wm-grid>
</wm-section>

Kontakt Stadtservice

Vorschau

Noch Fragen?

Das Stadtservice hilft Ihnen gerne!

Telefon: +43 1 4000-4001
Kontaktformular

Die Stadt Wien informiert Sie regelmäßig über Neuigkeiten und Service-Angebote.

Code

<wm-section contentsize="full" highlight="true">
  <wm-stack vertical="" gap="s">
    <wm-grid size="l" gap="m">
      <wm-card>
        <h2 slot="heading">Noch Fragen?</h2>
        <wm-stack gap="m" vertical="" slot="content">
          <div>
            <address itemscope="" itemtype="https://schema.org/ContactPoint">
              <strong>Das Stadtservice hilft Ihnen gerne!</strong>
              <p>
                Telefon: <a href="tel:0043140004001">+43 1 4000-4001</a><br>
                <a href="#">Kontaktformular</a>
              </p>
            </address>
          </div>
          <div>
            <wm-list type="horizontal" gap="m">
              <ul>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="wien-bot" width="35">Wienbot</wm-icon>
                  </a>
                </li>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="instagram" width="35">Instagram</wm-icon>
                  </a>
                </li>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="youtube" width="35">Youtube</wm-icon>
                  </a>
                </li>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="facebook" width="35">Facebook</wm-icon>
                  </a>
                </li>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="twitter" width="35">X</wm-icon>
                  </a>
                </li>
              </ul>
            </wm-list>
          </div>
        </wm-stack>
      </wm-card>

      <wm-card blocklink>
        <h2 slot="heading">Newsletter</h2>
        <div slot="content">
          <p>Die Stadt Wien informiert Sie regelmäßig über Neuigkeiten und Service-Angebote.</p>
        </div>
        <div slot="postcontent">
          <wm-button  full="true" kind="primary" color="frischgruen" alignment="center">
            <a href="#" class="wm-e-button">Abonnieren</a>
          </wm-button>
        </div>
      </wm-card>
    </wm-grid>
  </wm-stack>
</wm-section>

Kontakt wien.gv.at Redaktion

Vorschau

Noch Fragen?

Die wien.gv.at-Redaktion hilft weiter:
Kontaktformular

Code

<wm-section contentsize="full" highlight="true">
  <div>
    <wm-grid size="l" gap="m">
      <wm-card>
        <h2 slot="heading">Noch Fragen?</h2>
        <wm-stack gap="m" vertical="" slot="content">
          <div>
            <p>
              Die wien.gv.at-Redaktion hilft weiter:
              <br>
              <a href="#">Kontaktformular</a>
            </p>
          </div>
          <div>
            <wm-list gap="xs" type="horizontal">
              <ul>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="facebook" width="35">Facebook</wm-icon>
                  </a>
                </li>
                <li>
                  <a href="#" class="wm-no-external-icon">
                    <wm-icon iconid="wien-bot" width="35">WienBot</wm-icon>
                  </a>
                </li>
              </ul>
            </wm-list>
          </div>
        </wm-stack>
      </wm-card>
    </wm-grid>
  </div>
</wm-section>

Kontakt mit Details

Vorschau

Kontakt

Abteilungsleitung:
Maria Magistrati

Sekretariat:
E-Mail: post@wien.gv.at
Telefon: +43 1 4000 xxxx

Medienanfragen:
Maria Magistrati
E-Mail: maria.magistrati@wien.gv.at
Telefon: +43 1 4000 xxxx

Kontaktformular

Code

<wm-section contentsize="full" highlight="true">
  <div>
    <wm-grid size="l" gap="m">
      <wm-card>
        <h2 slot="heading">Kontakt</h2>
        <div slot="content">
          <p>
            <strong>Abteilungsleitung:</strong>
            <br>
            Maria Magistrati
          </p>
          <p>
            <strong>Sekretariat:</strong>
            <br>
            E-Mail: <a href="mailto:">post@wien.gv.at</a>
            <br>
            Telefon: <a href="tel:*">+43 1 4000 xxxx</a>
          </p>
          <p>
            <strong>Medienanfragen:</strong>
            <br>
            Maria Magistrati
            <br>
            E-Mail: <a href="mailto:">maria.magistrati@wien.gv.at</a>
            <br>
            Telefon: <a href="tel:*">+43 1 4000 xxxx</a>
          </p>
          <p><a href="#">Kontaktformular</a></p>
        </div>
      </wm-card>
    </wm-grid>
  </div>
</wm-section>

Kontakt in Infobox

Vorschau

Öffnungszeiten: Heute bis 12 Uhr
Standort Servicestellen der MA 10
E-Mail: post@ma10.wien.gv.at
Infotelefon: +43 1 4000 xxxx
Montag bis Freitag von 7.30 bis 18 Uhr

Weitere Kontakte

Code

<wm-card size="l" blocklink>
  <wm-list type="row" slot="content">
    <ul>
      <li>
        <wm-icon iconid="clock"></wm-icon>
        <div>Öffnungszeiten: <strong>Heute bis 12 Uhr</strong></div>
      </li>
      <li>
        <wm-icon iconid="pin">Standort</wm-icon>
        <a href="#">Servicestellen der MA 10</a>
      </li>
      <li>
        <wm-icon iconid="contact"></wm-icon>
        <div>
          E-Mail: <a href="mailto:">post@ma10.wien.gv.at</a>
          <br>
          Infotelefon: <a href="tel:">+43 1 4000 xxxx</a>
          <br>
          Montag bis Freitag von 7.30 bis 18 Uhr
          <br><br>
          <a href="#">Weitere Kontakte</a>
        </div>
      </li>
    </ul>
  </wm-list>
</wm-card>

Kontakt innerhalb der Seite

Link

Kontakt innerhalb der Seite öffnen

Code

<wm-section contentsize="full">
  <div>
    <wm-stack vertical gap="m">
      <div>
        <wm-grid size="l" gap="m">
          <wm-card>
            <h2 slot="heading">Fragen zu sozialen Themen?</h2>
            <div slot="content">
              <wm-stack equal vertical>
                <wm-stack vertical gap="m">
                  <wm-list gap="xs" type="row" clean>
                    <ul>
                      <li>
                        <wm-icon iconid="info" width="28" height="28"></wm-icon>
                        <div>
                          <a href="#">Sozialkommission der Bezirksvertretung Wieden</a>
                          <br>
                          <strong>Vorsitzende:</strong> Maria Magistrati
                          <br>
                        </div>
                      </li>
                      <li>
                        <wm-icon iconid="telefon" width="28" height="28"></wm-icon>
                        <div>
                          <strong>Telefon:</strong> <a href="tel:">+43 1 4000 xxxx</a>
                        </div>
                      </li>
                      <li>
                        <wm-icon iconid="email" width="28" height="28"></wm-icon>
                        <div>
                          <strong>E-Mail:</strong> <a href="mailto:">post@wien.gv.at</a>
                        </div>
                      </li>
                      <li>
                        <wm-icon iconid="pin" width="28" height="28"></wm-icon>
                        <div>
                          <a href="https://www.wien.gv.at/stadtplan/grafik.aspx?lang=de-AT&bookmark=-cH9dRk8BMEYR-aIJD8AWNQ-a5RphlRnKnmkev2pn4Mpr4C&bmadr=10471559">
                          1., Rathausstraße 42
                          </a>
                        </div>
                      </li>
                    </ul>
                  </wm-list>
                </wm-stack>
              </wm-stack>
            </div>
          </wm-card>
        </wm-grid>
      </div>
    </wm-stack>
  </div>
</wm-section>

<wm-section contentsize="full" highlight="true">
  <div>
    <wm-grid size="l" gap="m">
      <wm-card>
        <h2 slot="heading">Kontakt</h2>
        <wm-stack gap="m" vertical slot="content">
          <div>
            <address itemscope="" itemtype="https://schema.org/ContactPoint">
              <strong>Bezirksvorstehung des 4. Bezirks</strong>
            </address>
            <p>
              Telefon: <a href="tel:">+43 1 4000 xxxx</a>
              <br>
              <a href="">Kontaktformular</a>
            </p>
          </div>
        </wm-stack>
      </wm-card>
      <wm-card>
        <h2 slot="heading"><span lang="en" xml:lang="en">Newsletter</span></h2>
        <div slot="content">
          <wm-stack equal vertical gap="s">
            <p>Die Bezirksvorstehung Wieden informiert monatlich über Aktuelles aus dem 4. Bezirk.</p>
          </wm-stack>
        </div>
        <div slot="postcontent">
          <wm-button  full="true" kind="primary" color="frischgruen" alignment="center">
            <a href="#" class="wm-e-button">Abonnieren</a>
          </wm-button>
        </div>
      </wm-card>
    </wm-grid>
  </div>
</wm-section>

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at