Badge
Über das Pattern
Badges können im Text und in Cards verwendet werden, um wichtige Hinweise auf den ersten Blick sichtbar zu machen.
Parameter und Anwendung in Nunjucks
# Parameter
type: "string" # Erlaubte Werte: success, error
class: "string" # CSS Klasse
attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
# Anwendung
{% from "components/badge/badge.njk" import badge with context %}
{% call badge(type, attributes)%}
Text frei wählbar
{% endcall %}Variationen
Badge Standard
Die Schriftfarbe ist schwarz.
Badge Positiv
Die Schriftfarbe ist grün, etwa für die Angabe „Gratis“.
Badge Negativ
Die Schriftfarbe ist rot, etwa für die Angabe „Abgesagt“.
Badge unten positioniert in Cards
Stadt ermöglicht Wiener Kindern Urlaub
Für Familien mit kleinem Einkommen und Kinder von 7 bis 14 Jahren hat Wien noch Plätze.
HTML
Laden…Nunjucks
Laden…Badge in Cards
Stadt ermöglicht Wiener Kindern Urlaub
Für Familien mit kleinem Einkommen und Kinder von 7 bis 14 Jahren hat Wien noch Plätze.
HTML
Laden…Nunjucks
Laden…