Birincil, ikincil, vurgulu ve nötr renk çeşitleriyle yalnızca CSS'ye özgü Tailwind CSS bağlantısı. Altı çizili ve düz stilleri vurgulayın. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Bileşen stili bağlantı öğelerini görsel hiyerarşi ve anlamsal anlamla bağlayın. Frutjam bağlantı sistemi, Tailwind CSS yardımcı program sınıfları aracılığıyla birden fazla rengi, vurgulu efektleri, boyutları ve dekorasyon seçeneklerini destekler. Metin bağlantıları, gezinme ve harekete geçirici mesaj öğeleri için mükemmel olan bağlantılar, uygun odak yönetimi ve altı çizili geçiş seçenekleriyle erişilebilirlik standartlarını korur.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| link | Temel | Alt çizgi ve renk içeren stilize çapa |
| link-hover | Stil | Alt çizgi yalnızca fareyle üzerine gelindiğinde görünür |
| link-xs | Boyut | Ekstra küçük |
| link-sm | Boyut | Küçük |
| link-md | Boyut | Orta (varsayılan) |
| link-lg | Boyut | Büyük |
| link-xl | Boyut | Ekstra büyük |
| link-2xl | Boyut | 2× ekstra büyük |
| link-primary | Renk | Birincil tema rengi |
| link-secondary | Renk | İkincil tema rengi |
| link-accent | Renk | Vurgu teması rengi |
| link-neutral | Renk | Nötr tema rengi |
| link-info | Renk | Bilgi anlamsal rengi |
| link-success | Renk | Başarı anlamsal rengi |
| link-warning | Renk | Uyarı anlamsal rengi |
| link-error | Renk | Hata anlamsal rengi |
Temel Kullanım
<a class="link">Link</a> |
<a className="link">Link</a> |
Bağlantı Renkleri
Temanızla eşleştirmek veya anlamı iletmek için anlamsal bağlantı renkleri uygulayın (örneğin, yıkıcı eylemler için bağlantı hatası veya onay için bağlantı başarısı kullanmak).
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> |
Bağlantı Boyutları
Köprülerinizi çevredeki tipografiye uyacak şekilde ölçeklendirin. Bu yardımcı sınıflar, altbilgi "yasal" metni için ekstra küçükten, yüksek etkili kahraman bölümleri için 2 kat büyüğe kadar değişir.
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> |
Bağlantının Vurgu Durumu
Varsayılan olarak alt çizgiyi gizlemeyi ve yalnızca üzerine gelindiğinde ortaya çıkarmayı seçebilirsiniz. Bu, daha temiz gezinme menüleri ve kontrol paneli kenar çubukları için yaygın bir tasarım modelidir.
<a class="link link-hover">Hover this link</a> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Bağlantı sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.