Breaking News

Der Breaking News-Banner ist auf ganz wien.gv.at sichtbar und wird für außergewöhnliche Ereignisse verwendet, die ganz Wien betreffen.
Beispiele: Grillverbot, Badeverbot, Aufhebung der Kurzparkzone et cetera
Der Banner ist in 2 Farben verfügbar:
- Rot (Warnhinweis)
- Gelb (wichtiger Hinweis)
Treten mehrere Breaking News gleichzeitig auf, wird das textlich von der Redaktion gelöst.
Der Text sollte so kurz wie möglich sein (circa 200 Zeichen), ein Link ist optional.
Breaking News sind sticky ganz oben auf der Seite. Der Banner scrollt immer mit, außer die Nutzer*innen klicken ihn mit dem Schließen-Button "X" weg.

Varianten

Breaking News mit Warnhinweis

Vorschau

In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.

Code

<wm-breakingnews title="Badeverbot:" id="kurzparkzonen-error" type="error">
 In der Neuen Donau ist derzeit das Baden infolge eines Donau-Hochwassers verboten.
</wm-breakingnews>

Breaking News mit wichtigem Hinweis

Vorschau

Alle Kurzparkzonen sind bis 24.12. wegen starken Schneefalls aufgehoben.

Code

<wm-breakingnews title="" id="kurzparkzonen">
  Alle Kurzparkzonen sind bis 24.12. wegen starken Schneefalls aufgehoben.
</wm-breakingnews>

Dev

Interaktive Demo

type

title

sticky

Vorschau

Alle Kurzparkzonen sind bis Mittwoch wegen starken Schneefalls aufgehoben!

Code

<wm-breakingnews title="Eilmeldung:" id="kurzparkzonen1" type="warning" data-demo-pattern="wm-breakingnews-preview">
  Alle Kurzparkzonen sind bis Mittwoch wegen starken Schneefalls aufgehoben!
</wm-breakingnews>

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-breakingnews[color="meinefarben"] { 
  --breakingnews-background-color: #174342; 
  --breakingnews-font-color: white;
}

<wm-breakingnews title="Eilmeldung:" color="meinefarben">
  Alle Kurzparkzonen sind bis Mittwoch wegen starken Schneefalls aufgehoben!
</wm-breakingnews>

Alle Kurzparkzonen sind bis Mittwoch wegen starken Schneefalls aufgehoben!

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/BreakingNews/BreakingNews.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>

JavaScript

import { BreakingNews } from './wienermelange/assets/js/components/BreakingNews/BreakingNews.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`type`	Art der Meldung	`'warning'\|'error'\|'success'`	`'warning'`
`title`	Bezeichnung der Meldung	`String`	`''`
`id`	Einzigartige ID	`String`	`''`
`sticky`	Erkennt automatisch, ob sich der Banner sticky verhält.	`Boolean`	`true`
`closeText`	Text für den Schließen Button, default ist "Schließen".	`String`	`'Schließen'`

Slots

Name	Beschreibung
`default`	Text

CSS API

Property	Beschreibung
`--breakingnews-background-color`	Hintergrundfarbe
`--breakingnews-font-color`	Schriftfarbe
`--breakingnews-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