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

Stage
Light-Farben wurden als möglicher Hintergrund ergänzt.

Einstiegsbereich der Seite, optional:

Bildgröße - siehe auch Pattern Bild

 Varianten

Stage mit Titel

 Vorschau

Gemeinderatswahl 2025

 Code 
<wm-stage>
  <h1 slot="content">Gemeinderatswahl 2025</h1>
</wm-stage>

Stage mit Headerbild, Titel und hervorgehobenem Link

 Vorschau

Verkehr

Straßenbahn in Wien Mehr erfahren Code 
<wm-stage>
  <h1 slot="content">Verkehr</h1>
  <picture slot="media">
    <source srcset="/images/pattern/stage/verkehr-stage-l.jpg"/>
    <img src="/images/pattern/stage/verkehr-stage-s.jpg" alt="Straßenbahn in Wien"/>
  </picture>
  <wm-cta slot="content">
    <a href="#">Mehr erfahren</a>
  </wm-cta>
</wm-stage>

Stage mit Video

 Vorschau

Mariahilf, 6. Bezirk

 Code 
<wm-stage>
  <h1 slot="content">Mariahilf, 6. Bezirk</h1>
  <video src="/videos/mariahilf.mp4" slot="media" muted autoplay loop></video>
</wm-stage>

Stage mit Karussell

Achtung: Titeltexte abseits des 1. Bildes werden von Google nicht erfasst.

Vorschau

Gemeinderatswahl 2025

Jetzt Wahlkarte beantragen
Wahlkarte, die von einer Dame in einen Postkasten geworfen wird

Gemeinderatswahl 2025

Jetzt Wahlkarte beantragen
Wahlkarte, die von einer Dame in einen Postkasten geworfen wird Code 
<wm-carousel single="1200" dots autoplay label="Neuigkeiten">
  <wm-stage class="current first active">
    <div slot="content">
      <h1>Gemeinderatswahl 2025</h1>
      <wm-cta>
        <a href="#">Jetzt Wahlkarte beantragen</a>
      </wm-cta>
    </div>
    <img
      src="/images/wiengvat_startseite/stage/wahlkarte-stage-l.jpg"
      slot="media"
      alt="Wahlkarte, die von einer Dame in einen Postkasten geworfen wird"
      width="1200"
      height="450"
      title="copyright: APA"/>
  </wm-stage>
  <wm-stage class="last" inert="">
    <div slot="content">
      <h1>Gemeinderatswahl 2025</h1>
      <wm-cta>
        <a href="#">Jetzt Wahlkarte beantragen</a>
      </wm-cta>
    </div>
    <img
      src="/images/wiengvat_startseite/stage/wahlkarte-stage-l.jpg"
      slot="media"
      alt="Wahlkarte, die von einer Dame in einen Postkasten geworfen wird"
      width="1200"
      height="450"
      title="copyright: APA"/>
  </wm-stage>
</wm-carousel>

Tags über Stage

Nur auf der Startseite wien.gv.at

Vorschau

Wohnquartier

Bürgermeister vor dem Wienliebe-Schriftzug Bürgermeister vor dem Wienliebe-Schriftzug Bürgermeister vor dem Wienliebe-Schriftzug

Mariahilf, 6. Bezirk

Erstes #wienliebe Festival im Mai

Mehr erfahren
Bürgermeister vor dem Wienliebe-Schriftzug

Neuer Gemeindebau für Simmering

Mehr erfahren
Neuerrichtung von Wohnhäusern

Wie geht’s den Kindern und Jugendlichen

Zum Interview
Eine Gruppe von Jugendlichen im öffentlichen Bereich

Arbeite auch du an Wien

Jetzt bewerben
Junge Frau bei der Arbeit Code 
<wm-tag-list scrollable style="padding:1rem 0;">
  <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 justify="end">
    <h1 slot="content">Wohnquartier</h1>
    <picture slot="media">
      <source srcset="/images/musterseiten/startseite/wienliebe_alt.jpg" media="(min-width: 48em)">
      <img src="/images/musterseiten/startseite/wienliebe_alt.jpg" alt="Bürgermeister vor dem Wienliebe-Schriftzug">
    </picture>
    <picture slot="media">
      <source srcset="/images/musterseiten/startseite/wienliebe_alt.jpg" media="(min-width: 48em)">
      <img src="/images/musterseiten/startseite/wienliebe_alt.jpg" alt="Bürgermeister vor dem Wienliebe-Schriftzug">
    </picture>
    <picture slot="media">
      <source srcset="/images/musterseiten/startseite/wienliebe_alt.jpg" media="(min-width: 48em)">
      <img src="/images/musterseiten/startseite/wienliebe_alt.jpg" alt="Bürgermeister vor dem Wienliebe-Schriftzug">
    </picture>
  </wm-stage>

  <wm-stage style="--stage-margin-large: 0 !important;">
    <div slot="content">
      <h1 >Mariahilf, 6. Bezirk</h1>
    </div>
    <video src="/videos/mariahilf.mp4" slot="media" muted autoplay loop></video>
  </wm-stage>
  <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="Bürgermeister vor dem Wienliebe-Schriftzug"
      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="Neuerrichtung von Wohnhäusern"
      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="Eine Gruppe von Jugendlichen im öffentlichen Bereich"
      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="Junge Frau bei der Arbeit"
      width="1200"
      height="450"
      title="copyright: APA">
  </wm-stage>
</wm-carousel>

Tags unter der Stage

Für Übersichtsseiten wie Channel-Startseiten et cetera

Vorschau

City Summer Camp

Eine Gruppe von Kindern hält Schilder mit den Worten 'Summer', 'City' und 'Camp' Code 
<wm-stage>
  <h1 slot="content">City Summer Camp</h1>
  <img
    src="/images/pattern/stage/summer-camp-stage-l.jpg"
    slot="media"
    alt="Eine Gruppe von Kindern hält Schilder mit den Worten 'Summer', 'City' und 'Camp'"
    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>

Stage mit Farbe

 Vorschau

Veranstaltung

 Code 
<wm-stage color="morgenrot">
  <h1 slot="content">Veranstaltung</h1>
</wm-stage>

Stage mit Light-Farbe

 Vorschau

Veranstaltung

 Code 
<wm-stage color="morgenrot-light">
  <h1 slot="content">Veranstaltung</h1>
</wm-stage>
Dev

Interaktive Demo

Vorschau

Gemeinderatswahl 2025: Jetzt Wahlkarte beantragen

 Code 
<wm-stage data-demo-pattern="wm-stage-preview">
  <h1 slot="content">Gemeinderatswahl 2025: Jetzt Wahlkarte beantragen</h1>
  <div slot="media"></div>
  <div slot="content">
    <wm-cta data-demo="true" data-demo-link>
      <a href="#">Mehr erfahren</a>
    </wm-cta>
  </div>
</wm-stage>

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-stage[color="meinefarben"] { 
  --stage-media-background-color: cyan;
  --stage-text-background-color: #174342; 
  --stage-font-color: rgb(255, 255, 255);
}
<wm-stage color="meinefarben">
  <h1 slot="content">Lorem Ipsum</h1>
  <div slot="media"></div>
</wm-stage>

Lorem Ipsum

 API

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
color Hintergrund Farbe der Stage 'abendstimmung'|'flieder'|'frischgruen'|'goldgelb'|'morgenrot'|'nebelgrau'|'wasserblau' leer
justify Position der Überschrift 'start'|'end' leer
media Breakpoint, ab dem erst Medieninhalte angezeigt werden sollen (zum Beispiel 48em) String leer

Slots

Name Beschreibung
content Textinhalt
media Bild oder Video

Kontakt

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

handbuch@ma53.wien.gv.at