Link Component
CSS-only Tailwind CSS link with primary, secondary, accent, and neutral color variants. Hover underline and plain styles. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Liez les éléments d’ancrage de style des composants avec une hiérarchie visuelle et une signification sémantique. Le système de liens Frutjam prend en charge plusieurs couleurs, effets de survol, tailles et options de décoration via les classes utilitaires CSS Tailwind. Parfaits pour les liens texte, la navigation et les éléments d'appel à l'action, les liens maintiennent les normes d'accessibilité avec une gestion appropriée de la mise au point et des options de bascule de soulignement.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| link | Base | Ancre stylisée avec soulignement et couleur |
| link-hover | Style | Souligné visible uniquement au survol |
| link-xs | Taille | Très petit |
| link-sm | Taille | Petit |
| link-md | Taille | Moyen (par défaut) |
| link-lg | Taille | Grand |
| link-xl | Taille | Très grand |
| link-2xl | Taille | 2× très grand |
| link-primary | Couleur | Couleur du thème principal |
| link-secondary | Couleur | Couleur du thème secondaire |
| link-accent | Couleur | Couleur du thème d'accentuation |
| link-neutral | Couleur | Couleur du thème neutre |
| link-info | Couleur | Couleur sémantique de l'information |
| link-success | Couleur | Couleur sémantique du succès |
| link-warning | Couleur | Couleur sémantique d’avertissement |
| link-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
Couleurs des liens
Appliquez des couleurs de lien sémantique pour correspondre à votre thème ou pour transmettre un sens (par exemple en utilisant link-error pour les actions destructrices ou link-success pour la confirmation).
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> |
Tailles des liens
Adaptez vos liens hypertextes pour qu'ils correspondent à la typographie environnante. Ces classes utilitaires vont de très petite pour le texte « légal » de pied de page à 2X grande pour les sections de héros à fort impact.
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> |
État de survol du lien
Par défaut, vous pouvez choisir de masquer le soulignement et de le révéler uniquement au survol. Il s'agit d'un modèle de conception courant pour des menus de navigation et des barres latérales de tableau de bord plus propres.