Stage

Die Stage ist der oberste, visuell prägende Bereich einer Seite. Sie kann unterschiedlich gestaltet sein:

mit oder ohne Headerbild, Video oder Bildkarussell
mit oder ohne hervorgehobenem Link

Wann ist eine Stage sinnvoll?

Es gibt 2 Anwendungsfälle:

Als orientierender Einstieg in eine Seite: Die Stage vermittelt auf den ersten Blick, worum es auf der Seite geht.
Typische Einsatzbereiche sind:
- Themen-Übersichtsseiten
- Bezirksseiten
- Projektseiten (z. B. Klima-Campus)
- Kampagnenseiten
Als „Top-Teaser“ für besonders wichtige Inhalte: Auf Startseiten – z.B. wien.gv.at, Vorteilsclub - kann die Stage genutzt werden, um besonders wichtige und oft länger aktuelle Meldungen prominent zu präsentieren.

Auf Detailseiten ist eine Stage nicht sinnvoll – dort müssen die wichtigsten Informationen sofort sichtbar sein. Ausnahme: Ist die Detailseite eine Kampagnenseite, dann ist eine Stage für die Dauer der Kampagne möglich.

Gestaltungshinweise

Die Stage sollte nur mit Bildern oder Videos befüllt werden, die die Kernaussage der Seite klar und auf den ersten Blick erklären
Fotografische Motive sind verständlicher als Grafiken
Grafiken, Illustrationen oder Textanteile im Bild sind grundsätzlich möglich, sollten jedoch sparsam eingesetzt werden (auch weil sie auf kleineren Bildschirmen wie am Smartphone oft nicht gut erkennbar sind bzw. eventuell sogar abgeschnitten werden bei unterschiedlichen Bildgrößen)

Bildgröße - siehe auch Pattern Bild

Mobil

Verhältnis 1:1
Maximale Darstellung 520px mal 520px

Desktop

Verhältnis 8:3
Maximale Darstellung 1200px mal 450px

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

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

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

Eine Gruppe von Jugendlichen im öffentlichen Bereich

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

color

justify

media

Vorschau

Gemeinderatswahl 2025: Jetzt Wahlkarte beantragen

Mehr erfahren

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

wm-stage

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`playButtonLabel`	Label des Play-Buttons, wenn es ein Video gibt	`Boolean`	`"Video abspielen"`
`color`	Hintergrund Farbe der Stage	`'abendstimmung'\|'abendstimmung-light'\|'flieder'\|'flieder-light'\|'frischgruen'\|'frischgruen-light'\|'goldgelb'\|'goldgelb-light'\|'morgenrot'\|'morgenrot-light'\|'nebelgrau'\|'nebelgrau-light'\|'wasserblau'\|'wasserblau-light'`	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