Zum Inhalt springen
ad hoc AI Workbench

Card-Highlights · semantische Brand-Markierung

Status: Entwurf · Default V11 gesetzt

Karten mit Brand- oder Status-Farbe markieren — ohne hässliche Border-Stripes. Default in der Workbench ist die V11 Corner-Notch: ein 14×14 px Dreieck oben-links der Karte in Brand-/Status-Farbe.

Default · V11 Corner-Notch

CSS-Skizze:

.card {
  --notch: 14px;
  position: relative;
  overflow: hidden;
  padding-left: calc(20px + var(--notch));
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: var(--notch); height: var(--notch);
  background: var(--c, var(--color-navy));
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

Verwendet bei: KPI-Card-Modifiern (accent, success, warn, info), Tochter-Cards, Notes, Card-Modifiern (card--success, card--accent etc.).

Warum keine Border-Stripes?

Zwei frühere Iterationen verwendeten farbige Top- oder Left-Border-Stripes (3–4 px). Das Ergebnis sah nach „Bootstrap 3 Alert” aus, war optisch laut und passte nicht zum sonst ruhigen Layout. Der Corner-Notch trägt dieselbe Information (Tochter-/Status-Markierung), wirkt aber wie ein Detail des ad-hoc-Brand-Notches und nicht wie ein Aufkleber.

Alternativen — wann sinnvoll?

Im Karten-Highlight-Katalog sind 22 Varianten dokumentiert. Empfehlung:

VarianteWann
V1 · Square + Underlinewenn der Notch zu prominent wäre und nur ein Farb-Hint reicht
V3 · Tinted Backgroundwenn Wiedererkennung im Grid wichtiger als Lesbarkeit ist (z. B. Filter-Cards in einer Tochter-Übersicht)
V11 · Corner-Notch (Default)überall, wo ein Standard-Hint nötig ist
V13 / V18 · Hover-Revealwenn Karten primär klickbar sind und Brand-Akzent Distraction wäre
V19 · Pill-Chipwenn Tochter-Code als Tag prominent sein soll, Karte aber neutral bleibt

Volle Übersicht: clickdummy/public/card-highlights.html.

Verboten

  • 3–4 px Border-Top in Brand-/Status-Farbe.
  • 3–4 px Border-Left in Brand-/Status-Farbe.
  • Volle Card-Border in Brand-/Status-Farbe (außer im Hover-Zustand explizit gewünscht).
  • Mehrere Brand-Markierungen auf derselben Karte (Notch UND Tinted-Background — zu laut).

Verwandte Dokumente