Hinweise 1.2.0

Gib kontextbezogenes Feedback mit der .velin-alert-Komponente. Hinweise unterstuetzen vier semantische Varianten, optionale Icons, Titel und einen ausblendbaren Schliessen-Button. English: Alerts

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Dauerhafte Statusmeldungen im Inhaltsfluss neben dem beschriebenen Inhalt (Formularbanner, Seitenhinweise, Inline-Warnungen).
Wenn die Meldung sichtbar bleiben soll, bis der Nutzer sie schliesst oder weg navigiert.

Wann nicht verwenden

Kurzlebiges, nicht blockierendes Feedback nach einer Aktion: verwende Toasts.
Blockierende Bestaetigungen: verwende Dialog oder Modal.
Es gibt keine <velin-alert> Web Component; verwende das CSS-Pattern auf dieser Seite.

Einfaches Beispiel

Dies ist ein informativer Hinweis.

Aktion erfolgreich abgeschlossen!

Bitte pruefe deine Eingabe.

Etwas ist schiefgelaufen.

<div class="velin-alert velin-alert--info" role="alert">
  <div class="velin-alert__content">Dies ist ein informativer Hinweis.</div>
</div>

<div class="velin-alert velin-alert--success" role="alert">
  <div class="velin-alert__content">Aktion erfolgreich abgeschlossen!</div>
</div>

<div class="velin-alert velin-alert--warning" role="alert">
  <div class="velin-alert__content">Bitte pruefe deine Eingabe.</div>
</div>

<div class="velin-alert velin-alert--danger" role="alert">
  <div class="velin-alert__content">Etwas ist schiefgelaufen.</div>
</div>

Mit Icon und Titel

Achtung!

This alert has an icon and a bold title for emphasis.

<div class="velin-alert velin-alert--info" role="alert">
  <velin-icon name="info" size="20" class="velin-alert__icon"></velin-icon>
  <div class="velin-alert__content">
    <div class="velin-alert__title">Achtung!</div>
    This alert has an icon and a bold title for emphasis.
  </div>
</div>

Ausblendbar

Fuege einen .velin-alert__close-Button hinzu. Ein kleines Skript entfernt den Hinweis beim Klick.

You can dismiss me!

<div class="velin-alert velin-alert--warning" role="alert">
  <div class="velin-alert__content">You can dismiss me!</div>
  <button class="velin-alert__close" aria-label="Schliessen"
    onclick="this.closest('.velin-alert').remove()">&times;</button>
</div>

Barrierefreiheit

Verwende role="alert" fuer dringende Meldungen, die unterbrechen muessen; verwende role="status" fuer ruhigere, hoefliche Ankuendigungen.
Schliessen-Steuerelemente brauchen einen barrierefreien Namen (z. B. aria-label="Schliessen").
Verlasse dich nicht nur auf Farbe: kombiniere Varianten fuer farbenblinde Nutzer mit Icons oder klaren Titeln.
Keep important instructions in the document flow; alerts are not a substitute for field-level errors (see Form summary).

CSS-Variablen / Klassen

Variable	Beschreibung
`--velin-color-info-subtle`	Hintergrund fuer `.velin-alert--info`
`--velin-color-info`	Rahmen fuer `.velin-alert--info`
`--velin-color-success-subtle`	Hintergrund fuer `.velin-alert--success`
`--velin-color-success`	Rahmen fuer `.velin-alert--success`
`--velin-color-warning-subtle`	Hintergrund fuer `.velin-alert--warning`
`--velin-color-warning`	Rahmen fuer `.velin-alert--warning`
`--velin-color-danger-subtle`	Hintergrund fuer `.velin-alert--danger`
`--velin-color-danger`	Rahmen fuer `.velin-alert--danger`
`--velin-radius-md`	Rahmenradius
`--velin-space-3`	Abstand zwischen Icon und Inhalt
`--velin-space-4`	Padding

Varianten: .velin-alert--info, --success, --warning, --danger. Structure: .velin-alert__icon, __content, __title, __close.

Best practices & pitfalls

Bevorzuge kurze, handlungsorientierte Texte; verlinke den naechsten Schritt, wenn Wiederherstellung noetig ist.
Ausblendbar alerts need a small script (or framework handler) — CSS alone does not remove the node.
Erfinde keine Bootstrap-.alert-*-Klassennamen; bleibe bei .velin-alert--*.

Toasts — stacked, transient notifications
Form summary — submit-time error list
Announcer — live region utility