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

Stage

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

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=""/>
  </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

Gemeinderatswahl 2025

Jetzt Wahlkarte beantragen
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=""
      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=""
      width="1200"
      height="450"
      title="copyright: APA"/>
  </wm-stage>
</wm-carousel>

Tags über Stage

Nur auf der Startseite wien.gv.at

Vorschau

Wohnquartier

test123 test123 test123

Mariahilf, 6. Bezirk

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 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="test123">
    </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="test123">
    </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="test123">
    </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=""
      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

City Summer Camp

 Code 
<wm-stage>
  <h1 slot="content">City Summer 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

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