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

Tag
Varianten

Tag mit Icon

Tags für Amtswege und Stadtplan haben ein Icon.

Vorschau Stadtplan Code 
<wm-tag>
  <a href="#">
    <wm-icon iconid="pin"></wm-icon>
    Stadtplan
  </a>
</wm-tag>

Tag für Amtswege

Der Tag für Amtswege und Formulare verlinkt in den meisten Fällen zu Online-Anträgen. Dieser Spezial-Tag hat einen interaktiv-blauen Hintergrund und enthält ein entsprechendes Icon.

Vorschau Zum Online-Antrag Code 
<wm-tag color="amtswege">
  <a href="#">
    <wm-icon iconid="amtswege"></wm-icon>
    Zum Online-Antrag
  </a>
</wm-tag>

Tag mit Call-to-Action

Dieser Tag hat Aufforderungscharakter (zum Beispiel "Mitmachen") und hebt sich durch seine grüne Farbe ab.

Vorschau Mitmachen Code 
<wm-tag color="frischgruen">
  <a href="#">
    Mitmachen
  </a>
</wm-tag>

Tag mit Navigationsfunktion

Zur besseren Übersicht kann es Navigation-Tags mit einem Pfeil-Icon geben, die auf eine darüberliegende Ebene führen. Der Navigation-Tag wird immer an 1. Stelle angezeigt. Es kann nur einen Navigation-Tag geben. Es kann nur entweder einen Navigation-Tag oder einen Dropdown-Tag geben.

Vorschau Zum Online-Antrag Code 
<wm-tag>
  <a href="#">
    <wm-icon iconid="chevron-left"></wm-icon>
    Zum Online-Antrag
  </a>
</wm-tag>

Tag mit Dropdown

Für eine gute Themenübersicht oder Listen wie die Bezirke kann es Dropdown-Tags geben. Der Dropdown-Tag wird immer an 1. Stelle angezeigt. Es kann nur entweder einen Navigation-Tag oder einen Dropdown-Tag geben.

Vorschau Alle Klima-Themen Code 
<wm-tag dropdown>
  <a href="#">
    Alle Klima-Themen
  </a>
  <ul>
    <li><a href="#">Bildung</a></li>
    <li><a href="#">Energie</a></li>
    <li><a href="#">Gebäude</a></li>
    <li><a href="#">Mobiliät</a></li>
    <li><a href="#">Natur</a></li>
    <li><a href="#">Stadtplanung</a></li>
  </ul>
</wm-tag>

Tag in einer Card

Alle Varianten der Tags können auch in Cards eingesetzt werden, außer Navigation-Tags und Dropdown-Tags.

Vorschau

Kosten

Bitte erfragen Sie die jeweiligen Kosten direkt am Standort.
Code 
<wm-card>
  <div slot="content">
    <wm-stack gap="s" vertical equal>
      <h2>Kosten</h2>
      Bitte erfragen Sie die jeweiligen Kosten direkt am Standort.
    </wm-stack>
  </div>
  <div slot="postcontent">
    <wm-tag-list>
      <ul>
        <li><wm-tag open="false"><a href="#">Förderungen für Eltern</a></wm-tag></li>
      </ul>
    </wm-tag-list>
  </div>
</wm-card>

Tag-Liste

Tags brechen automatisch um, wenn nicht alle in einer Zeile Platz haben.

Vorschau Code 
<wm-tag-list>
  <ul>
    <li>
      <wm-tag>
        <a href="#">
          Baden
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Parken
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Jobs
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Kindergarten-Anmeldung
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Meldeservice
        </a>
      </wm-tag>
    </li>
  </ul>
</wm-tag-list>

Tag-Liste mit Scrollbalken

Tags brechen nicht um, wenn nicht alle in einer Zeile Platz haben.

Vorschau Code 
<wm-tag-list scrollable="true">
  <ul>
    <li>
      <wm-tag>
        <a href="#">
          Baden
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Parken
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Jobs
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Kindergarten-Anmeldung
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Meldeservice
        </a>
      </wm-tag>
    </li>
  </ul>
</wm-tag-list>

Tags über Stage

Nur auf der Startseite wien.gv.at

Vorschau

Erstes #wienliebe Festival im Mai

Mehr erfahren

Neuer Gemeindebau für Simmering

Mehr erfahren

Wie geht’s den Kindern und Jugendlichen

Zum Interview

Arbeite auch du an Wien

Jetzt bewerben
Code 
<wm-tag-list scrollable   >
  <ul>
    <li>
      <wm-tag>
        <a href="#">
          <wm-icon iconid="amtswege"></wm-icon>
          Amtswege
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          <wm-icon iconid="pin"></wm-icon>
          Stadtplan
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Baden
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Parken
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          Jobs
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          <wm-icon iconid="amtswege"></wm-icon>
          Kindergarten-Anmeldung
        </a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">
          <wm-icon iconid="amtswege"></wm-icon>
          Meldeservice
        </a>
      </wm-tag>
    </li>
  </ul>
</wm-tag-list>
<wm-carousel single="1200" dots autoplay>
  <wm-stage style="--stage-margin-large: 0 !important;">
    <div slot="content">
      <h1>Erstes #wienliebe Festival im Mai</h1>
      <wm-cta>
        <a href="#">Mehr erfahren</a>
      </wm-cta>
    </div>
    <img
      src="/images/musterseiten/startseite/wienliebe_alt.jpg"
      slot="media"
      alt=""
      width="1200"
      height="450"
      title="copyright: APA">
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;">
    <div slot="content">
      <h1>Neuer Gemeindebau für Simmering</h1>
      <wm-cta>
        <a href="#">Mehr erfahren</a>
      </wm-cta>
    </div>
    <img
      src="/images/musterseiten/startseite/Gemeindebau_Simmering.jpg"
      slot="media"
      alt=""
      width="1200"
      height="450"
      title="copyright: APA">
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;">
    <div slot="content">
      <h1>
        Wie geht’s den Kindern und Jugendlichen</h1>
      <wm-cta>
        <a href="#">Zum Interview</a>
      </wm-cta>
    </div>
    <img
      src="/images/musterseiten/startseite/Faire Chancen.jpg"
      slot="media"
      alt=""
      width="1200"
      height="450"
      title="copyright: APA">
  </wm-stage>
  <wm-stage style="--stage-margin-large: 0 !important;">
    <div slot="content">
      <h1>Arbeite auch du an Wien</h1>
      <wm-cta>
        <a href="#">Jetzt bewerben</a>
      </wm-cta>
    </div>
    <img
      src="/images/musterseiten/startseite/StW_MA44.jpg"
      slot="media"
      alt=""
      width="1200"
      height="450"
      title="copyright: APA">
  </wm-stage>
</wm-carousel>

Tags unter der Stage

Für Übersichtsseiten wie Channel-Startseiten et cetera

Vorschau

Summer City Camp

 Code 
<wm-stage>
  <h1 slot="content">Summer City Camp</h1>
  <img
    src="/images/pattern/stage/summer-camp-stage-l.jpg"
    slot="media"
    alt=""
    width="1200"
    height="450"
  >
</wm-stage>
<wm-tag-list scrollable">
  <ul>
    <li>
      <wm-tag>
        <a href="#">Sommer</a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">Camps</a>
      </wm-tag>
    </li>
    <li>
      <wm-tag>
        <a href="#">Anmeldung</a>
      </wm-tag>
    </li>
  </ul>
</wm-tag-list>
Dev

Interaktive Demo
Vorschau Alle Freibäder Code 
<wm-tag data-demo-pattern="wm-tag-preview">
  <a href="#">
    Alle Freibäder
  </a>
  <ul>
    <li><a href="#">Mehr Informationen</a></li>
    <li><a href="#">Weiteres</a></li>
  </ul>
</wm-tag>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Die in der Demo aufgelisteten Farben sind nur im Wiener-Melange-Theme verfügbar. Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu: 

wm-tag[color="meinefarben"] { 
  --tag-background-color: #174342;
  --tag-background-color--hover: rgb(63, 168, 167);
  --tag-border-color: #174342;
  --tag-link-color: rgba(255, 255, 255, 1);
  --tag-link-color--hover: black;
}
<wm-tag color="meinefarben">
  <a href="#">
    <wm-icon iconid="pin"></wm-icon>
    Stadtplan
  </a>
</wm-tag>
Stadtplan API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Tag/Tag.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>
 JavaScript 
import { Tag } from './wienermelange/assets/js/components/Tag/Tag.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';
    import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
color Tag mit spezieller Funktion 'frischgruen'|'amtswege' leer
open Dropdown offen? string "false"
dropdown Ist es ein Dropdown Tag? Boolean false

Slots

Name Beschreibung
default Link oder Liste mit Links

Methoden

Eigenschaft Optionen Argumente
toggle Liste öffnen oder schließen Event (Event)
openDropdown Dropdown-Tag öffnen /
closeDropdown Dropdown-Tag schließen /

Events

Event Beschreibung Rückgabewert
eventName

CSS API

Property Beschreibung
--tag-background-color Hintergrundfarbe
--tag-background-color--hover Hintergrundfarbe Hover & Focus
--tag-border-color Rahmenfarbe
--tag-padding-inline--mobil Padding vertikal (Mobilansicht unter 64em)
--tag-padding-block--mobil Padding horizontal (Mobilansicht unter 64em)
--tag-padding-inline--desktop Padding vertikal (Desktopansicht ab 64em)
--tag-padding-block--desktop Padding horizontal (Desktopansicht ab 64em)
--tag-gap Gap im Button oder Link
--tag-min-height--mobil Mindesthöhe (Mobilansicht unter 64em)
--tag-min-height--desktop Mindesthöhe (Desktopansicht ab 64em)
--tag-link-color Linkfarbe
--tag-link-color--hover Linkfarbe Hover & Focus
--tag-font-size Schriftgröße

Kontakt

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

handbuch@ma53.wien.gv.at