Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at

Tutorial: Übersichtsseite wien.gv.at

Das Tutorial "Seitenstruktur" bildet die Grundlage für dieses Tutorial, in dem wir eine Übersichtsseite erstellen. Übersichtsseiten sind Startseiten und Landing-Pages von größeren Bereichen.

Der Aufbau der Seite und des head-Elements wird auf der Seite "Erste Schritte" erklärt.

Das Ergebnis dieses Tutorials ist diese Template-Seite.

HTML anzeigen 
<!DOCTYPE html>
<!-- Natürliche Sprache des Dokuments. Anpassen, wenn das Dokument nicht auf Deutsch ist. -->
<!-- Die CSS-Klasse "wien" ist nur für den Standard wien.gv.at-Header notwendig -->
<html lang="de" class="wien">
  <head>
    <!-- Encoding der Seite, muss im Dokument vor dem <title> kommen -->
    <meta charset="UTF-8">
    <!-- Viewport Meta Tag für responsive Designs, muss im Dokument vor dem <title> kommen. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Seitentitel. Muss einzigartig sein. -->
    <title> | Stadt Wien</title>

    <!-- Wiener Melange Stylesheet -->
    <link rel="stylesheet" href="https://assets.wien.gv.at/theme/202/css/wiener-melange.bundle.min.css">

    <!-- Font für bessere Performance vorladen -->
    <link rel="preload" href="https://assets.wien.gv.at/theme/202/fonts/WienerMelangeVF.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Buttons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Button/Button.js" type="module"></script>
    <!-- Karussells -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Carousel/Carousel.js" type="module"></script>
    <!-- CTA -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/CTA/CTA.js" type="module"></script>
    <!-- Cards -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Card/Card.js" type="module"></script>
    <!-- Extrahiert und zeigt Copyright-Information aus Bildern an -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Copyright/Copyright.js" type="module"></script>
    <!-- Grid -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Grid/Grid.js" type="module"></script>
    <!-- Header durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Header/Header.js" type="module"></script>
    <!-- Icons -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Icon/Icon.js" type="module"></script>
    <!-- Erweitert Listen -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/List/List.js" type="module"></script>
    <!-- Modals -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Modal/Modal.js" type="module"></script>
    <!-- Hauptnavigation durch JavaScript angereichert -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/NavMain/NavMain.js" type="module"></script>
    <!-- Stage -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Stage/Stage.js" type="module"></script>
    <!-- Quicklinks -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Quicklinks/Quicklinks.js" type="module"></script>
    <!-- Sections -->
    <script src="https://assets.wien.gv.at/theme/202/js/components/Section/Section.js" type="module"></script>

    <!-- Favicon für ältere Browser -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Alternative für favicon.ico, skalierbar und berücksichtigt Dark Mode. (Browser Support: https://caniuse.com/link-icon-svg) -->
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- Homescreen Icon für iOS -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <!-- Kanonische URL -->
    <link rel="canonical" href="https://handbuch.wien.gv.at/development/tutorials/uebersicht/">

    <!-- Beschreibung der Seite, maimal 150 Zeichen lang, muss einzigartig sein. -->
    <meta name="description" content="Beschreibung der Seite">
     <!-- Farbe des UI im Browser. Anpassen oder entfernen.-->
    <meta name="theme-color" content="#75cde3">

    <!-- Seitentitel -->
    <meta property="og:title" content="Seitentitel">
    <!-- Beschreibung der Seite -->
    <meta property="og:description" content="Beschreibung der Seite">
    <!-- Absoluter Pfad zum Vorschaubild. Muss geändert werden -->
    <meta property="og:image" content="https://handbuch.wien.gv.at/images/meta.png">
    <!-- Sprache der Seite -->
    <meta property="og:locale" content="de">
    <!-- Seitentyp -->
    <meta property="og:type" content="website">
    <!-- Url der Seite. Muss geändert werden -->
    <meta property="og:url" content="https://wwww.wien.gv.at">
    <!-- Großes Vorschaubild auf X -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- Handle der Site auf X. Anpassen, entfernen oder so lassen. -->
    <meta name="twitter:site" content="@StadtWien">
  </head>
  <body>
    <div class="wm-skip-link wm-h-vh">
      <a href="#content" class="wm-e-button">
        Zum Inhalt springen
      </a>
    </div>
    <!-- Header auf jeder Seite -->
    <wm-header>
      <!-- Erste Zeile im Header. Trägt den Titel und das Logo. -->
      <div>
        <!-- Titel der Microsite -->
        <!-- <a href="/development/tutorials/seitenstruktur/template/">
          
        </a> -->
        <!-- Stadt Wien Logo, linkt immer zur wien.gv.at Startseite -->
        <a href="https://wien.gv.at">
          <svg viewBox="0 0 311 142" width="80" role="img" aria-labelledby="site-logo1">
            <title id="site-logo1">Startseite wien.gv.at</title>

            <path fill="#FF0000" d="M55.3 53.6V15.3H14.2c0 13.3 1 26.2 2.9 38.3h38.2zM55.3 65.7h-36c6.9 32.7 20.2 57.1 36 62.2V65.7zM67.3 53.6V15.3h41.1c0 13.3-1 26.2-2.9 38.3H67.3zM67.3 65.7h36c-6.9 32.7-20.2 57.1-36 62.2V65.7z"></path>
            <path fill="currentColor" d="M153.5 65.2c-2.4 0-4.7-.3-6.9-1s-4.4-1.7-6.6-3.1l1.3-8.4h.3c2.1 1.6 4.1 2.7 6.2 3.3 2.1.6 4 .9 5.7.9 5 0 7.5-1.9 7.5-5.6 0-1.3-.4-2.5-1.1-3.5-.7-1-2-2.1-3.8-3.1l-6-3.4c-3.5-1.9-5.9-4-7.4-6.2s-2.2-4.7-2.2-7.4c0-4.2 1.4-7.5 4.2-9.9 2.8-2.4 6.6-3.6 11.3-3.6 4.3 0 8.3 1.1 11.9 3.2l-1.3 8.1h-.3c-1.4-1-3-1.7-4.9-2.2-1.9-.5-3.6-.7-5.3-.7-4.4 0-6.6 1.7-6.6 5 0 1.2.4 2.3 1.1 3.3.8 1 2.2 2.1 4.4 3.3l5.3 2.9c3.3 1.8 5.8 3.8 7.3 6s2.3 4.8 2.3 7.8c0 4.5-1.5 8-4.5 10.6-2.8 2.5-6.8 3.7-11.9 3.7zM183.8 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6H188v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10zM209 64.6c-3.2 0-5.7-.8-7.5-2.5-1.9-1.7-2.8-4-2.8-7.1 0-3.1 1.1-5.5 3.2-7.3 2.2-1.8 5.1-2.8 8.8-3.2l9.1-.9v-.1c0-1.8-.5-3.1-1.5-4-1-.9-2.8-1.4-5.4-1.4-1.9 0-3.9.2-5.9.7-2 .5-3.6 1-4.8 1.6h-.4l1.3-7.7c1.4-.6 3.1-1 5.1-1.5 2-.4 4.2-.6 6.4-.6 4.9 0 8.5 1.1 10.8 3.4 2.3 2.3 3.4 5.6 3.4 10v10.4c0 1.7.1 3.4.4 5 .2 1.6.6 3 1.2 4.2v.4h-8.5c-.3-.6-.5-1.5-.7-2.4-.2-1-.3-1.9-.4-2.7h-.4c-.8 1.6-2.3 2.9-4.3 4s-4.4 1.7-7.1 1.7zm-1.1-10.3c0 1 .3 1.8.9 2.4.6.6 1.7 1 3.1 1 2.3 0 4.1-.7 5.6-2s2.2-3.1 2.2-5.2v-.8l-6.9.8c-1.7.2-3 .6-3.8 1.1-.7.6-1.1 1.5-1.1 2.7zM260.9 64v-4.9h-.4c-1 1.8-2.4 3.2-4.3 4.2s-4 1.5-6.4 1.5c-2.9 0-5.4-.7-7.6-2.1-2.2-1.4-3.9-3.4-5.1-6-1.2-2.6-1.8-5.6-1.8-9 0-3.4.6-6.4 1.8-9 1.2-2.6 2.9-4.5 5.1-6 2.2-1.4 4.7-2.1 7.6-2.1 2.2 0 4.2.4 6 1.3 1.8.9 3.2 2.1 4.2 3.6h.5V15.3h9.1V64h-8.7zm-8.1-7c2.5 0 4.4-.9 5.9-2.6 1.5-1.7 2.2-4 2.2-6.7 0-2.8-.7-5.1-2.2-6.7-1.5-1.7-3.5-2.5-5.9-2.5-2.5 0-4.5.8-5.9 2.5-1.5 1.6-2.2 3.9-2.2 6.8 0 2.8.7 5.1 2.2 6.7 1.4 1.6 3.3 2.5 5.9 2.5zM284.9 64c-1.6-2.2-2.7-4.6-3.5-7.4-.8-2.8-1.2-6-1.2-9.5V39h-5.7v-7.6h5.7v-9.7h9v9.7h7.7l-1.3 7.6h-6.4v7.4c0 3.7.5 6.9 1.5 9.6 1 2.7 2.4 5.3 4.3 7.6v.4h-10.1zM161.6 126.1h-11c-1.1-2.4-2.3-5.4-3.5-9-1.3-3.6-2.5-7.5-3.6-11.9-1.2-4.4-2.2-8.9-3.1-13.7-.9-4.7-1.5-9.4-1.8-14.1h9.9c.3 4.3.9 8.8 1.7 13.5.8 4.7 1.7 9.2 2.8 13.7 1.1 4.4 2.2 8.5 3.4 12.2h.5l9.9-33h7.3l9.9 33h.5c1.2-3.7 2.3-7.8 3.3-12.2 1-4.4 1.9-9 2.7-13.7.8-4.7 1.3-9.2 1.7-13.5h9.7c-.3 4.7-1 9.4-1.8 14.1-.9 4.7-1.9 9.3-3.1 13.7-1.2 4.4-2.4 8.3-3.6 11.9-1.3 3.6-2.4 6.6-3.5 9h-11l-8.2-27.4h-.7l-8.4 27.4zM213.1 88.3c-1.7 0-3.1-.5-4.2-1.6s-1.6-2.4-1.6-4 .5-3 1.6-4 2.5-1.6 4.2-1.6c1.7 0 3.1.5 4.2 1.6 1.1 1 1.6 2.4 1.6 4s-.5 2.9-1.6 4c-1.1 1-2.5 1.6-4.2 1.6zm-4.6 37.8V93.4h9.1v32.7h-9.1zM241.4 126.9c-3.6 0-6.6-.7-9.2-2.1-2.6-1.4-4.6-3.4-5.9-5.9-1.4-2.6-2.1-5.5-2.1-9 0-3.6.7-6.7 2.2-9.3 1.5-2.6 3.5-4.6 6-5.9 2.6-1.4 5.5-2.1 8.7-2.1 4.8 0 8.5 1.5 11.2 4.4 2.7 2.9 4 7 4 12.2v2l-22.5 2.5c.6 2 1.7 3.4 3.2 4.2 1.6.8 3.5 1.2 5.7 1.2 2.1 0 4.2-.3 6.4-.8 2.1-.6 3.7-1.2 4.8-1.9h.5l-1.3 7.8c-1.2.6-2.9 1.2-5.1 1.8-2.1.6-4.3.9-6.6.9zm-.5-27c-2 0-3.7.6-5 1.9-1.3 1.2-2.1 3.1-2.4 5.6l13.9-1.6c-.3-2-1-3.5-2.1-4.4-1.3-1-2.7-1.5-4.4-1.5zM262.6 126.1V93.4h8.2V99h.4c.8-1.9 2.2-3.4 4.1-4.6 1.9-1.1 4.1-1.7 6.6-1.7 3.8 0 6.8 1.3 9 3.8s3.3 6.1 3.3 10.6v19.1h-9.1v-17.9c0-5.1-2.1-7.7-6.3-7.7-2.1 0-3.8.8-5.1 2.3-1.3 1.5-1.9 3.5-1.9 6v17.3h-9.2z"></path>
          </svg>
        </a>
        <!-- Standard wien.gv.at Menü -->
        <wm-nav-main type="hidden">
  <a href="/nojs" class="fallback">
    Menü
    <svg width="26" height="26" viewBox="0 0 123.14 123.14" id="burger" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h123.14v123.14H0z"/><path d="M17.67 27.59h87v-6h-87zM17.67 58.57h87v6h-87zM17.67 95.49h87v6h-87z"/>
    </svg>
  </a>
  <div slot="precontent">
    <wm-stack horizontal="" gap="xs" alignment="center">
      <wm-icon iconid="language"></wm-icon>
      <wm-list type="horizontal" separator="pipe" gap="xxs">
        <ul>
          <li><a href="#">English</a></li>
          <li><a href="#">Bosanski Hrvatski Srpski</a></li>
          <li><a href="#">Türkçe</a></li>
        </ul>
      </wm-list>
    </wm-stack>
  </div>
  <ul>
    <li>
      <a href="#">
        <wm-icon iconid="home"></wm-icon>
        Startseite
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="pin"></wm-icon>
        Stadtplan
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="amtswege"></wm-icon>
        Amtswege
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="contact"></wm-icon>
        Kontakte
      </a>
    </li>
    <li>
      <a href="#">
        <wm-icon iconid="money"></wm-icon>
        Jobs
      </a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">
        Freizeit
      </a>
      <ul>
        <li>
          <a href="#">
            Veranstaltungen
          </a>
        </li>
        <li>
          <a href="#">
            Baden
          </a>
        </li>
        <li>
          <a href="#">
            Sport
          </a>
          <ul>
            <li><a href="#">Übersicht</a></li>
            <li><a href="#">Sportmöglichkeiten</a></li>
            <li><a href="#">Kurse</a></li>
            <li><a href="#">Vereine</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wohnen
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Verkehr
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Bildung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Gesundheit
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Umwelt
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Zusammenleben
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Stadtentwicklung
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Politik
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">
        Wirtschaft
      </a>
      <ul>
        <li><a href="#">Menüpunkt 1</a></li>
        <li><a href="#">Menüpunkt 2</a></li>
      </ul>
    </li>
  </ul>
  <div>
    <wm-list type="horizontal">
      <ul>
        <li><a href="https://facebook.com/wien.at" class="wm-no-external-icon" target="_blank"><wm-icon iconid="facebook">Facebook</wm-icon></a></li>
        <li><a href="https://instagram.com/stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="instagram">Instagram</wm-icon></a></li>
        <li><a href="https://x.com/Stadt_Wien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="twitter">X (Twitter)</wm-icon></a></li>
        <li><a href="https://tiktok.com/@stadtwien" class="wm-no-external-icon" target="_blank"><wm-icon iconid="tiktok">TikTok</wm-icon></a></li>
        <li><a href="https://youtube.com/channel/UCGLOly45we_1ZTXAXF7TZDA" class="wm-no-external-icon" target="_blank"><wm-icon iconid="youtube">YouTube</wm-icon></a></li>
        <li><a href="https://www.wien.gv.at/bot/" class="wm-no-external-icon" target="_blank"><wm-icon iconid="wien-bot">Wienbot</wm-icon></a></li>
      </ul>
    </wm-list>
    <p>
      <a href="#">
        <strong>NEWSLETTER</strong>
      </a>
    </p>
  </div>
</wm-nav-main>
      </div>

      <!-- Zweite Zeile im Header für Microsite-Navigation, sonstige Buttons oder die Suche. -->
      <!-- <div>
        <wm-nav-main microsite>
          <ul></ul>
        </wm-nav-main>
      </div> -->
    </wm-header>

    <!-- Hauptinhalt der Seite -->
    <main id="content">
      <!-- Titel der Seite -->
      <wm-stage>
        <h1 slot="content">Tutorial: Übersichtsseite wien.gv.at</h1>
      </wm-stage>

      <wm-section>
        <h2></h2>
        
      </wm-section>

      <wm-section>
        <h2>Übersicht</h2>
        <wm-carousel label="Wasserversorgung">
          
        </wm-carousel>
      </wm-section>

      <wm-section highlight>
        <wm-grid size="l">
          
        </wm-grid>
      </wm-section>

      <wm-section contentsize="text">
        <h2></h2>
        <wm-quicklinks>
          <ul></ul>
        </wm-quicklinks>
      </wm-section>
    </main>

    <!-- Der Footer enthält die notwendigen Links und Copyright-Information -->
    <footer>
      <!-- Copyright-Information wird aus Bildern extrahiert und automatisch hier angezeigt-->
      <wm-copyright></wm-copyright>
      <!-- Weiterführende Links -->
      <wm-list type="horizontal" separator="pipe" alignment="center">
        <ul></ul>
      </wm-list>
      © Stadt Wien, Rathaus, A-1010 Wien
    </footer>

    <!-- Live-Region -->
    <div role="status" class="wm-h-vh"></div>
    <!-- Wrapper für Modals -->
    <wm-modal></wm-modal>
  </body>
</html>

Sections

Inhalte sind üblicherweise in Sections (<wm-section> oder <section>) eingeteilt, die mit Überschriften eingeleitet werden. 

<section>
  <h2>Übersicht</h2>
</section>

Bereiche können mit dem highlight-Attribut farblich hervorgehoben werden - dabei müssen aber gewisse Farbregeln beachtet werden. Die Hervorhebung funktioniert nur mit <wm-section>- und nicht mit einfachen <section>-Elementen.

Beispiel: Section mit farblicher Hervorhebung

<script src="./wienermelange/assets/js/components/Section/Section.js" type="module"></script>
<wm-section highlight>
  <h2>Übersicht</h2>
</wm-section>

Übersicht

Cards

Übersichtsseiten haben selten eigene Inhalte. Meistens dienen sie als Verteilerseiten für andere Inhalte und Seiten. Dafür verwenden wir häufig das Pattern Card (<wm-card>). Cards verfügen über eine Vielzahl von Slots. Zumindest sollten Sie Inhalt (slot="content") übergeben. Üblicherweise gibt es auch Überschriften (slot="heading") und ein Bild (slot="media").
Das size-Attribut legt die Größe der Card fest und das blocklink-Attribut macht die gesamte Card klickbar.

Beispiel: Klickbare Card

<script src="./wienermelange/assets/js/components/Card/Card.js" type="module"></script>
<wm-card size="m" blocklink>
  <h3 slot="heading">
    <a href="#">Wasserkraftwerke</a>
  </h3>

  <div slot="content">
    Das Wiener Trinkwasser wird seit Anfang des 20. Jahrhunderts zur Produktion umweltfreundlicher Energie genützt.
  </div>

  <img slot="media" src="/images/templates/tutorials/schafberg-1.jpg" width="350" height="197" loading="lazy">
</wm-card>

Wasserkraftwerke

Das Wiener Trinkwasser wird seit Anfang des 20. Jahrhunderts zur Produktion umweltfreundlicher Energie genützt.
Beispiel: Clickbare Card

Mehrere Cards lassen sich entweder in einem Karussell (<wm-carousel>) oder einem Grid (<wm-grid>) darstellen.

Karussell

Das Karussell ist ideal für die Darstellung mehrerer Cards. Es sollte mindestens eine kurze Bezeichnung (label-Attribut) enthalten und für eine bessere Barrierefreiheit das dots-Attribut (Indikatoren unter dem Karussell anzeigen) nutzen. Wichtig ist, dass die Cards im Karussell nicht automatisch wechseln, sondern nur durch Klick oder Tastaturbedienung gesteuert werden.

Beispiel: Karussell

<script src="./wienermelange/assets/js/components/Carousel/Carousel.js" type="module"></script>
<wm-carousel label="Wasserversorgung">
  <wm-card size="m">
    …
  </wm-card>
</wm-carousel>

Von den Alpen in die Stadt

Brunnen

Rund 1.500 Trinkbrunnen sowie 55 Monumental- und Denkmalbrunnen gibt es in Wien. Sie befinden sich in Parks, auf Spielplätzen und bei Märkten.

Wasserbehälter

31 Wasserbehälter sorgen dafür, dass Wien mit ausreichend Trinkwasser von höchster Qualität versorgt wird

Wasserkraftwerke

Das Wiener Trinkwasser wird seit Anfang des 20. Jahrhunderts zur Produktion umweltfreundlicher Energie genützt.
Beispiel: Karussell

Grid

Cards können auch in einem Grid ausgegeben werden. Der Unterschied zum Karussell ist, dass die Cards immer sichtbar sind.

Beispiel: Grid mit großen Cards

<script src="./wienermelange/assets/js/components/Grid/Grid.js" type="module"></script>
<wm-grid size="l">
  <wm-card>
    <h2 slot="heading">
      <a href="#">Wasserqualität</a>
    </h2>

    <div slot="content">
      <p>
         Die Veröffentlichung der angegebenen Werte erfolgt gemäß der Trinkwasser-Verordnung BGBl. II Nr. 304/2001 idgF. Alle weiteren Werte werden zusätzlich angeführt.
       </p>
       <h2>Wasserhärte</h2>
       <p>
         Die Wasserhärte (Gesamthärte) ist abhängig von den Mineralien, die das Wasser aus dem Boden aufnimmt. Die Wasserversorgungsunternehmen in Österreich unterscheiden drei Härtestufen:
       </p>
       <ul>
         <li>Eins>I: 0 bis 10 °dH (Grad deutscher Härte) - weich</li>
         <li>Zwei>II: 10 bis 16 °dH (Grad deutscher Härte) - mittel</li>
         <li>Drei>III: über 16°dH (Grad deutscher Härte) - hart</li>
       </ul>
    </div>

    <div slot="postcontent" class="wm-u-tar">
      <wm-cta>
         <a href='#'>
           Wasserqualität
         </a>
       </wm-cta>
       <br>
       <wm-cta>
         <a href='#'>
           Wasserhärte
         </a>
       </wm-cta>
    </div>
  </wm-card>
</wm-grid>

Zahlen und Fakten

Der Umfang der Wasserversorgungs-Einrichtungen in Wien ist beachtlich. Das Niveau wird durch laufende Investitionen in die Infrastruktur gehalten und ausgebaut.

Die Abteilung Wiener Wasser (MA 31) betreut:

  • 330 Kilometer Hochquellenleitungen bis Wien
  • 3.000 Kilometer Rohrnetz in Wien
  • 12.500 Hydranten
  • 102.900 Hausanschlüsse und 104.000 Wasserzähler
  • Rund 1.500 Trinkbrunnen entlang von Straßen und Gehsteigen
  • 55 Monumental- und Denkmalbrunnen
  • 130 Aquädukte
Weitere Zahlen und Fakten

Wasserqualität

Die Veröffentlichung der angegebenen Werte erfolgt gemäß der Trinkwasser-Verordnung BGBl. II Nr. 304/2001 idgF. Alle weiteren Werte werden zusätzlich angeführt.

Wasserhärte

Die Wasserhärte (Gesamthärte) ist abhängig von den Mineralien, die das Wasser aus dem Boden aufnimmt. Die Wasserversorgungsunternehmen in Österreich unterscheiden drei Härtestufen:

  • Eins>I: 0 bis 10 °dH (Grad deutscher Härte) - weich
  • Zwei>II: 10 bis 16 °dH (Grad deutscher Härte) - mittel
  • Drei>III: über 16°dH (Grad deutscher Härte) - hart
Wasserqualität
Wasserhärte
Beispiel: Große Cards in einem Grid

Quicklinks

Mit Quicklinks können Links zu weiterführenden Seiten auch weniger prominent als Cards dargestellt werden. Dafür benötigen Sie die Patterns Hervorgehobener Link und Quicklink-Liste.

Beispiel: Quicklinks

<script src="./wienermelange/assets/js/components/Quicklinks/Quicklinks.js" type="module"></script>
<script src="./wienermelange/assets/js/components/CTA/CTA.js" type="module"></script>
<wm-quicklinks>
  <ul>
    <li>
      <wm-cta full="true">
        <a href="/kontakte/ma31/wasser-strategie-2050.html">
          Strategie &quot;Wiener Wasser 2050&quot;
        </a>
      </wm-cta>
    </li>
  
    <li>
      <wm-cta full="true">
        <a href="/kontakte/ma31/wasser-strategie-2050.html">
          Sichere Wasserversorgung bei Notfällen
        </a>
      </wm-cta>
    </li>
  
    <li>
      <wm-cta full="true">
        <a href="/kontakte/ma31/wasser-strategie-2050.html">
          Wiener Wassercharta
        </a>
      </wm-cta>
    </li>
  </ul>
</wm-quicklinks>
Beispiel: Quicklinks

Weitere Tutorials

Kontakt

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

handbuch@ma53.wien.gv.at