Teaser

Hauptkapitel
Designsystem
Unterkapitel
Komponenten
Gilt für
Websites & Webapplikationen (mit Login)

Darstellung und Verhalten

Varianten

Teaser (Standard)

  • Der Teaser besteht aus:
    • Titel
    • Text (optional)
    • Button
    • Bild (optional)
    • Newstyp (nur bei News)
    • Datum (nur bei News)
  • Der Text-Bereich des Teasers (Titel, Text, Button, Datum) kann auf einer farbigen (Akzentfarbe der Seite) oder einer weissen Fläche angezeigt werden. Ist die Fläche weiss, dann wird der Titel in der Akzentfarbe dargestellt.
  • Das Bild kann entweder auf der linken oder rechten Seite sein.
  • Die ganze Kachel ist verlinkt.

Personenteaser

  • Der Personenteaser besteht aus:
    • Bild (optional)
    • Name der Person
    • Position / Funktion der Person (optional)
    • Adresse (optional)
    • Text (optional)
    • Button (Optional)
  • Nur der Button ist verlinkt.

Newsteaser (Standard)

  • Der Newsteaser ist eine Gruppe von bis zu drei Teasern.
  • Die einzelnen Teaser werden immer in der gleichen Grösse dargestellt, auch wenn es nur ein oder zwei Teaser sind (immer linksbündig zum Inhalt)
  • Die Höhe der Teaser wird durch den Inhalt bestimmt. Die Teaser sind alle gleich hoch. Der höchste Teaser bestimmt die Höhe der anderen Teaser.
  • Es gibt folgende Varianten:
    • Newstyp, Datum, Titel
    • Newstyp, Datum, Titel, Text
    • Newstyp, Datum Titel Bild
  • Die verschiedenen Varianten können gemischt werden.
  • Zu den drei Teasern können folgende Inhalte angezeigt werden:
    • Titel (H2)
    • Link auf eine Newsübersicht (Link «Mehr Beiträge»).
    • Linkliste zu weiteren Newsübersichten bestehend aus einem Titel und 1-n Links.
  • Jede Kachel ist verlinkt.

Newsteaser (prominent)

  • Der Newsteaser (prominent) ist eine Gruppe von drei kleinen und einem grossen Teaser (Kombination aus dem «Teaser (Standard)» und dem Newsteaser (Standard)»).
  • Er hat einen Titel (H2) und optional einen Link auf eine Newsübersicht.
  • Der grosse Teaser muss ein Bild haben.
  • Jede Kachel ist verlinkt.

Schwerpunktteaser

Besteht aus ein bis sechs Teasern.

Verwandte Inhalte

  • Verwandte Inhalten besteht aus:
    • Titel (H2)
    • ein bis sechs Teasern.
  • Die Teaser bestehen aus einem Titel und einem optionalen Beschreibungstext aus Stichwörtern.
  • Die Titel werden in der Akzentfarbe der Seite dargestellt
  • Es werden maximal drei Teaser nebeneinander dargestellt
    • Sind es insgesamt ein, zwei, drei oder vier Teaser, so werden sie breiter und bündig zum Titel dargestellt. Erst ab fünf Teasern wechselt es in die dreispaltige Darstellung

Publikationsteaser

  • besteht aus:
    • Titel der Publikation
    • Bild (opt.)
    • Herausgeber
    • Publikationsdatum
    • Autor
    • Downloadlink (Dateityp, Grösse, Sprache, Seitenanzahl (opt.))

Verwendung

Mit einem Teaser stellen wir relevante weiterführende Inhalte prominent dar. Der Teaser ist ein Push-Werkzeug, mit dem wir Inhalte bewerben können, z.B. News oder Kampagnen. Er hebt sich optisch von den anderen Inhalten der Seite ab und wird so von den Nutzenden stärker wahrgenommen.

Ein Teaser besteht aus einem Text- oder Text-Bild-Element.

Teaser (Standard)

Wir verwenden den «Teaser (Standard)», um zum Inhalt passende weiterführende Informationen und Seiten zu verlinken. Dabei gelten folgende Regeln:

  • Wir platzieren möglichst nicht mehr als zwei Teaser auf einer Seite.
  • Wir verwenden Teaser nicht als «Ersatz» für Navigations-Komponenten.
  • Ein Bild wählen wir nur dann, wenn es auf der verlinkten Seite genutzt wird bzw. zum Inhalt passt.
  • Wir verwenden die Variante mit der farbigen Fläche bei Teasern, die alleine stehen. Werden zwei oder mehrere Teaser hintereinander verwendet, dann nutzen wir die Variante mit der weissen Fläche.

Personenteaser

Wir stellen mit dem Personenteaser Verantwortliche und Ansprechpersonen dar. Dabei gelten folgende Regeln:

  • Wir können können eine oder mehrere Personen darstellen. Mehrere Personen stellen wir untereinander als Liste dar.
  • Der Name der Person ist Pflicht.
  • Wir mischen keine Teaser ohne Bild mit Teasern mit Bild. Ist kein Bild vorhanden, können wir einen Platzhalter nutzen. Das Bild hat immer das gleiche Format.
  • Mit dem Button im Teaser können wir auf weiterführende Informationen zur Person oder auf ein Kontaktformular verlinken.

Newsteaser (Standard)

Wir nutzen den «Newsteaser (Standard)», um News zum Inhalt der Seite darzustellen. Die Gruppe aus drei Teasern erscheint immer unterhalb des Kontakts und vor dem Footer der Seite.

Wir können den «Newsteaser (Standard)» ausserdem für eine Newsübersicht nutzen. Dafür werden fünf Gruppen untereinander als Liste angezeigt. Gibt es mehr als 15 News, so kann die Übersicht mit einer Pagination ergänzt werden.

Newsteaser (prominent)

Wir nutzen den «Newsteaser (prominent)», um eine Newsübersicht anzuteasern. Diese Teasergruppe nutzen wir auf Startseiten oder Übersichtsseiten.

Auf Themenseiten, Amtsseiten oder Direktionsseiten nutzen wir den «Newsteaser (Standard)».

Schwerpunktteaser

Wir nutzen den Schwerpunktteaser, um Schwerpunkte eines Amtes oder einer Direktion aufzuführen.

Die Teaser müssen ein Bild haben. Ohne Bild wird ein Platzhalter angezeigt.

Verwandte Inhalte

Wir nutzen den Teaser «Verwandte Inhalte» auf Inhaltseiten, um Themen zu verlinken, die zum Inhalt der aktuellen Seite passen. Dabei darf es sich nicht um Unterseiten der aktuellen Seite handeln. Das Element erscheint immer unterhalb des Kontakts und vor dem Footer.

Publikationsteaser

Wir stellen mit dem Publikationsteaser die wichtigsten Informationen zu einer Publikation dar. Die Nutzenden sehen so auf einen Blick, um welche Publikation es sich handelt. Dies hilft einzuschätzen, ob sie für das aktuelle Nutzerbedürfnis relevant ist.

Kontakt

Digitale Verwaltung - ZHweb

E-Mail

zhweb@sk.zh.ch