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

Hervorhebung

Dient der Hervorhebung einzelner Inhalte oder Textstellen im Fließtext. Hervorhebungen dürfen alle Markenfarben haben, allerdings nur die Light-Varianten.

Übergeordnete Hinweise, die zu Beginn einer Seite dargestellt werden sollen, müssen mit dem Pattern Meldung umgesetzt werden.

Hervorhebungen dürfen nicht mit Icons kombiniert werden, bei Meldungen sind Icons standardmäßig vorgesehen.

 Varianten

Hervorhebung mit Hintergrundfarbe

Hervorhebung mit Hintergrundfarbe - Morgenrot

Dieser Warnhinweis kann zum Beispiel bei Störungen von diversen Services oder bei geschlossenen Außenstellen und Ähnlichem zum Einsatz kommen

Vorschau

Aufgrund von Wartungsarbeiten steht dieses Service derzeit nicht zur Verfügung.

 Code 
<wm-highlight color="morgenrot-light">
  <p>Aufgrund von Wartungsarbeiten steht dieses Service derzeit nicht zur Verfügung.</p>
</wm-highlight>

Hervorhebung mit Hintergrundfarbe - Goldgelb

Für wichtige Hinweise, wie zum Beispiel geänderte Öffnungszeiten, Termine, "amtliche Hinweise" und Ähnliches

Vorschau

Wichtig: Es kann passieren, dass Sie keine Zahlungsanweisung zugeschickt bekommen. Verlassen Sie sich nicht darauf! Wenn Sie keine Zahlungsanweisung bekommen haben, müssen Sie einen Antrag für ein neues Parkpickerl stellen. Machen Sie das spätestens 4 Wochen, bevor die Gültigkeit Ihres alten Parkpickerls endet.

Code 
<wm-highlight color="goldgelb-light">
  <p>
    <strong>Wichtig:</strong>
    Es kann passieren, dass Sie keine Zahlungsanweisung zugeschickt bekommen. Verlassen Sie sich nicht darauf! Wenn Sie
    keine Zahlungsanweisung bekommen haben, müssen Sie einen Antrag für ein neues Parkpickerl stellen. Machen Sie das
    spätestens 4 Wochen, bevor die Gültigkeit Ihres alten Parkpickerls endet.
  </p>
</wm-highlight>

Hervorhebung mit Hintergrundfarbe - Frischgrün

Für neutrale Hervorhebung und "sanfte Hinweise"

Vorschau

Laut vorläufigen Daten betrug der Bevölkerungsstand Wiens am 1. Oktober 2023 2.002.821 Personen. Näheres dazu im aktuellen Bevölkerungsmonitoring.

 Code 
<wm-highlight color="frischgruen-light">
  <p>Laut vorläufigen Daten betrug der Bevölkerungsstand Wiens am 1. Oktober 2023 2.002.821 Personen. Näheres dazu im aktuellen <a href="#">Bevölkerungsmonitoring</a>.</p>
</wm-highlight>

Hervorhebung mit Hintergrundfarbe - Wasserblau

Für neutrale Hervorhebung und "sanfte Hinweise"

Vorschau

Laut vorläufigen Daten betrug der Bevölkerungsstand Wiens am 1. Oktober 2023 2.002.821 Personen. Näheres dazu im aktuellen Bevölkerungsmonitoring.

 Code 
<wm-highlight color="wasserblau-light">
  <p>Laut vorläufigen Daten betrug der Bevölkerungsstand Wiens am 1. Oktober 2023 2.002.821 Personen. Näheres dazu im aktuellen <a href="#">Bevölkerungsmonitoring</a>.</p>
</wm-highlight>

Hervorhebung mit Hintergrundfarbe - Nebelgrau

Für Archiv-Hinweise

Vorschau

Der Styleguide ist ein Relikt aus grauer Vorzeit. Alles was Sie für die Arbeit in der digitalen Kommunikation der Stadt Wien benötigen, finden Sie ab sofort im Handbuch.

 Code 
<wm-highlight color="nebelgrau-light">
  <p>Der Styleguide ist ein Relikt aus grauer Vorzeit. Alles was Sie für die Arbeit in der digitalen Kommunikation der Stadt Wien benötigen, finden Sie ab sofort im <a href="#">Handbuch</a>.</p>
</wm-highlight>

Hervorhebung mit Rahmenlinien

Rahmenlinien können eingesetzt werden, um Inhalte im Fließtext zu betonen. Damit unterscheiden sie sich von den restlichen Hervorhebungen, bei denen es sich um gesonderte Hinweise handelt.

Rahmenlinien sind in allen Markenfarben möglich, siehe Interaktive Demo.

Hervorhebung mit Rahmenlinien - Fast Schwarz

 Vorschau

Rahmenlinien in den Farben Fast Schwarz, Goldgelb, Flieder, Abendstimmung, Morgenrot und Frischgrün heben Inhalte hervor, zum Beispiel kurzfristig geänderte Öffnungszeiten oder ein kurzfristig nicht verfügbares Service. Fast Schwarz ist üblich für Archiv-Inhalte.

 Code 
<wm-highlight color="fastschwarz" type="prominent">
  <p>Rahmenlinien in den Farben Fast Schwarz, Goldgelb, Flieder, Abendstimmung, Morgenrot und Frischgrün heben Inhalte hervor, zum Beispiel kurzfristig geänderte Öffnungszeiten oder ein kurzfristig nicht verfügbares Service. Fast Schwarz ist üblich für Archiv-Inhalte.</p>
</wm-highlight>
Dev

Interaktive Demo

Vorschau

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Code 
<wm-highlight data-demo-pattern="wm-highlight-preview">
  <p data-demo="data-demo" data-demo-text="data-demo-text">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </p>
</wm-highlight>

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-highlight[color="meinefarben"] { 
  --highlight-background-color: #174342; 
  --highlight-font-color: #fff; 
}
<wm-highlight color="meinefarben">
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
  </p>
</wm-highlight>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.

API

Abhängigkeiten

HTML 
<script src="https://assets.wien.gv.at/theme/latest/js/components/Highlight/Highlight.js" type="module"></script>
 JavaScript 
import { Highlight } from './wienermelange/assets/js/components/Highlight/Highlight.js';

Eigenschaften

Eigenschaften
Eigenschaft Beschreibung Werte Default
color Farbe 'abendstimmung'|'abendstimmung-light'|'flieder'|'flieder-light'|'frischgruen'|'frischgruen-light'|'goldgelb'|'goldgelb-light'|'morgenrot'|'morgenrot-light'|'nebelgrau'|'nebelgrau-light'|'wasserblau'|'wasserblau-light' "nebelgrau-light"
type Art der Hervorhebung 'prominent' leer

Slots

Name Beschreibung
default HTML oder Text-Content

CSS API

Property Beschreibung
--highlight-background-color Hintergrundfarbe
--highlight-border-color Rahmenfarbe
--highlight-border-width Rahmenstärke
--highlight-font-color Textfarbe
--highlight-padding Innenabstand
--highlight-padding--large Innenabstand der Large-Variante in der Desktopansicht (ab 64em)

Kontakt

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

handbuch@ma53.wien.gv.at