Nur CSS-Tailwind-CSS-Link mit primären, sekundären, Akzent- und neutralen Farbvarianten. Hover-Unterstreichungs- und Uni-Stile. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Verknüpfen Sie Komponenten mit Stilankerelementen mit visueller Hierarchie und semantischer Bedeutung. Das Frutjam-Linksystem unterstützt mehrere Farben, Hover-Effekte, Größen und Dekorationsoptionen durch Tailwind-CSS-Dienstprogrammklassen. Perfekt für Textlinks, Navigation und Call-to-Action-Elemente. Links wahren die Barrierefreiheitsstandards mit der richtigen Fokusverwaltung und Unterstreichungs-Umschaltoptionen.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| link | Base | Gestylter Anker mit Unterstreichung und Farbe |
| link-hover | Stil | Die Unterstreichung ist nur beim Hover sichtbar |
| link-xs | Größe | Extra klein |
| link-sm | Größe | Klein |
| link-md | Größe | Mittel (Standard) |
| link-lg | Größe | Groß |
| link-xl | Größe | Extra groß |
| link-2xl | Größe | 2× extra groß |
| link-primary | Farbe | Primäre Designfarbe |
| link-secondary | Farbe | Sekundäre Themenfarbe |
| link-accent | Farbe | Akzentfarbe des Themas |
| link-neutral | Farbe | Neutrale Themenfarbe |
| link-info | Farbe | Semantische Infofarbe |
| link-success | Farbe | Semantische Erfolgsfarbe |
| link-warning | Farbe | Semantische Warnungsfarbe |
| link-error | Farbe | Semantische Fehlerfarbe |
Grundlegende Verwendung
Linkfarben
Wenden Sie semantische Linkfarben an, die zu Ihrem Thema passen oder eine Bedeutung vermitteln (z. B. mit link-error für destruktive Aktionen oder link-success zur Bestätigung).
1 2 3 4 5 6 7 8 | <a class="link link-primary">Primary link</a> <a class="link link-secondary">Secondary link</a> <a class="link link-accent">Accent link</a> <a class="link link-success">Success link</a> <a class="link link-info">Info link</a> <a class="link link-warning">Warning link</a> <a class="link link-error">Error link</a> <a class="link link-neutral">Neutral link</a> |
Linkgrößen
Skalieren Sie Ihre Hyperlinks so, dass sie zur umgebenden Typografie passen. Diese Dienstprogrammklassen reichen von extra klein für „juristischen“ Fußzeilentext bis hin zu 2X groß für wirkungsvolle Heldenabschnitte.
1 2 3 4 5 6 | <a class="link link-xs">Primary link</a> <a class="link link-sm">Secondary link</a> <a class="link link-md">Accent link</a> <a class="link link-lg">Success link</a> <a class="link link-xl">Info link</a> <a class="link link-2xl">Warning link</a> |
Link-Hover-Status
Standardmäßig können Sie festlegen, dass die Unterstreichung ausgeblendet und nur angezeigt wird, wenn Sie mit der Maus darüber fahren. Dies ist ein gängiges Designmuster für übersichtlichere Navigationsmenüs und Dashboard-Seitenleisten.
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Link-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.