Tutorial: Detailseite wien.gv.at
Der Aufbau der Seite und des head-Elements wird auf der Seite "Erste Schritte" erklärt.
Detailseiten bestehen üblicherweise hauptsächlich aus Text- und Bildinhalten in einer Section. Es können auch mehrere section bzw. wm-section-Tags auf einer Seite eingebunden werden. Neben Text- und Bildinhalten können prinzipiell alle weiteren Elemente aus der Pattern Library eingebunden werden.
Das Ergebnis dieses Tutorials ist diese Template-Seite.
<!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>Template: Detailseite wien.gv.at | 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>
<!-- Form -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Form/Form.js" type="module"></script>
<!-- Input -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Input/Input.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>
<!-- Tables -->
<script src="https://assets.wien.gv.at/theme/202/js/components/Table/Table.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/detail/">
<!-- 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>
<!-- Skip-Link -->
<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>
<!-- Erster Container im Header. -->
<div>
<!-- 1. wird das Stadt Wien Logo eingebunden und 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>
<!-- 2. kann, wenn Suche vorhanden, das Suchfeld eingebunden werden-->
<wm-form role="search">
<wm-input label="Suche" hideLabel="hideLabel" placeholder="Wie können wir helfen?" search="hiddenmobile"></wm-input>
</wm-form>
<!-- 3. Standard Menü einbinden -->
<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>
</wm-header>
<!-- Hauptinhalt der Seite -->
<main id="content">
<!-- Titel der Seite -->
<wm-stage>
<h1 slot="content">Template: Detailseite wien.gv.at</h1>
</wm-stage>
<wm-section>
<wm-tag-list>
<ul></ul>
</wm-tag-list>
</wm-section>
<wm-section contentsize="text">
<h2>Wasserhärte - Qualität des Wiener Trinkwassers</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>I: 0 bis 10 °dH (Grad deutscher Härte) - weich</li>
<li>II: 10 bis 16 °dH (Grad deutscher Härte) - mittel</li>
<li>III: über 16°dH (Grad deutscher Härte) - hart</li>
</ul>
<p>
Nach diesen Härtestufen richtet sich die Dosierung von Waschmittel und Kalkschutzmittel (Enthärter). Der Geschirrspüler ist der jeweiligen Härtestufe entsprechend einzustellen (siehe Bedienungsanleitung).
</p>
<p>
Für die Einstellung der Wasserhärte bei Haushaltsgeräten empfiehlt Wiener Wasser generell die Einstellung < 10 °dH (Grad deutscher Härte) zu wählen. Dafür ist keine erhöhte Waschmittel-, beziehungsweise Kalkschutzmitteldosierung erforderlich.
</p>
<p>
Das Wiener Trinkwasser weist eine Härte von 6 bis 11 (in manchen Fällen 16) °dH (Grad deutscher Härte) auf. Über den Wasserhärtebereich der einzelnen Wiener Bezirke gibt ein Tonbanddienst von Wiener Wasser Auskunft:<br>
Telefon: +43 1 599 59-32900
</p>
<wm-highlight color="flieder-light">
<p>
<strong>Anmerkungen und Erläuterungen</strong>
</p>
<p>
*) In Ausnahmefällen kann durch die Einspeisung von Grundwasser die Wasserhärte bis auf 16 °dH ansteigen. Dies betrifft die Bezirke 2, 3, 11, 20, 21 und 22. Manche Gerätehersteller verwenden in den Betriebsanleitungen nicht °dH, sondern Millimol pro Liter (mmol/l) oder andere Härteangaben.
</p>
<p>
1,5 Millimol Calciumcarbonat je Liter entsprechen 8,4 °dH (Grad deutscher Härte)
</p>
</wm-highlight>
<wm-table border="full" zebra="even" sort="true, false, false" alignment="center, end, end" header="wasserblau">
<table>
<caption>
Wasserhärte in den 23 Wiener Bezirken
</caption>
<thead>
<tr>
<th>Bezirk</th>
<th>Wasserhärte °dH<br />(Grad deutscher Härte)</th>
<th>
Wasserhärte mmol/l<br />
(Millimol pro Liter)
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>2</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96/ 1,07-2,85*)</td>
</tr>
<tr>
<td>3</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96 / 1,07-2,85*)</td>
</tr>
<tr>
<td>4</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>5</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>6</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>7</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>8</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>9</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>10</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>11</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96/ 1,07-2,85*)</td>
</tr>
<tr>
<td>12</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>13</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>14</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>15</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>16</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>17</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>18</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>19</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
<tr>
<td>20</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96/ 1,07-2,85*)</td>
</tr>
<tr>
<td>21</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96/ 1,07-2,85*)</td>
</tr>
<tr>
<td>22</td>
<td>6°-11°/ 6°-16°*)</td>
<td>1,07-1,96/ 1,07-2,85*)</td>
</tr>
<tr>
<td>23</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
</tbody>
</table>
</wm-table>
</wm-section>
<wm-section contentsize="text" highlight>
<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>Tags und Tag-Listen
Unter der Stage können auf einer Detailseite Tags eingebunden werden. Tags dienen als Navigationselement und verlinken zu häufig gesuchten, verwandten Themen und Bereichen und heben sich durch einen pillenförmigen Rahmen von anderen Links ab.
<script src="./wienermelange/assets/js/components/Tag/Tag.js" type="module"></script>
<script src="./wienermelange/assets/js/components/TagList/TagList.js" type="module"></script><wm-tag-list>
<ul>
<li>
<wm-tag>
<a href="/development/tutorials/uebersicht/template/">
Wasserversorgung
</a>
</wm-tag>
</li>
<li>
<wm-tag>
<a href="#">
Brunnen
</a>
</wm-tag>
</li>
<li>
<wm-tag>
<a href="#">
Tagbezeichnung
</a>
</wm-tag>
</li>
<li>
<wm-tag>
<a href="#">
Tagbezeichnung
</a>
</wm-tag>
</li>
</ul>
</wm-tag-list>Hervorhebungen
Hervorhebungen sind farblich abgehobene Inhalte bzw. Textstellen im Fließtext.
<script src="./wienermelange/assets/js/components/Highlight/Highlight.js" type="module"></script><wm-highlight color="flieder-light">
<p>
<strong>Anmerkungen und Erläuterungen</strong>
</p>
<p>
*) In Ausnahmefällen kann durch die Einspeisung von Grundwasser die Wasserhärte bis auf 16 °dH ansteigen. Dies betrifft die Bezirke 2, 3, 11, 20, 21 und 22. Manche Gerätehersteller verwenden in den Betriebsanleitungen nicht °dH, sondern Millimol pro Liter (mmol/l) oder andere Härteangaben.
</p>
<p>
1,5 Millimol Calciumcarbonat je Liter entsprechen 8,4 °dH (Grad deutscher Härte)
</p>
</wm-highlight>Anmerkungen und Erläuterungen
*) In Ausnahmefällen kann durch die Einspeisung von Grundwasser die Wasserhärte bis auf 16 °dH ansteigen. Dies betrifft die Bezirke 2, 3, 11, 20, 21 und 22. Manche Gerätehersteller verwenden in den Betriebsanleitungen nicht °dH, sondern Millimol pro Liter (mmol/l) oder andere Härteangaben.
1,5 Millimol Calciumcarbonat je Liter entsprechen 8,4 °dH (Grad deutscher Härte)
Tabellen
Tabellen verfügen, wie die meisten HTML-Elemente, über ein gewisses Defaultstyling, das durch die Nutzung einer Web-Component erweitert werden kann.
| Bezirk | Wasserhärte °dH (Grad deutscher Härte) |
Wasserhärte mmol/l (Millimol pro Liter) |
|---|---|---|
| 1 | 6°-11° | 1,07-1,96 |
<script src="./wienermelange/assets/js/components/Button/Button.js" type="module"></script>
<script src="./wienermelange/assets/js/components/Icon/Icon.js" type="module"></script>
<script src="./wienermelange/assets/js/components/Table/Table.js" type="module"></script><wm-table border="full" zebra="even" sort="true, false, false" alignment="center, end, end" header="wasserblau">
<table>
<caption>
Wasserhärte in den 23 Wiener Bezirken
</caption>
<thead>
<tr>
<th>Bezirk</th>
<th>Wasserhärte °dH<br />(Grad deutscher Härte)</th>
<th>
Wasserhärte mmol/l<br />
(Millimol pro Liter)
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>6°-11°</td>
<td>1,07-1,96</td>
</tr>
</tbody>
</table>
</wm-table>| Wasserhärte °dH (Grad deutscher Härte) |
Wasserhärte mmol/l (Millimol pro Liter) |
|
|---|---|---|
| 1 | 6°-11° | 1,07-1,96 |
| 3 | 6°-10° | 1,07-1,99 |
| 6 | 6°-13° | 1,07-1,97 |
- Das
border-Attribut definiert, an welchen Stellen ein Rahmen angezeigt werden. - Das
zebra-Attribut hebt jede 2. Reihe visuell hervor. - Mit dem
sort-Attribut kann man Spalten sortierbar machen. - Das
alignment-Attribut legt die Textausrichtung pro Spalte fest. - Das
header-Attribut legt eine Hintergrundfarbe für die Kopfzeile fest.
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