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.
Hubungkan elemen jangkar gaya komponen dengan hierarki visual dan makna semantik. Sistem tautan Frutjam mendukung berbagai warna, efek hover, ukuran, dan opsi dekorasi melalui kelas utilitas Tailwind CSS. Sempurna untuk tautan teks, navigasi, dan elemen ajakan bertindak, tautan mempertahankan standar aksesibilitas dengan manajemen fokus yang tepat dan menggarisbawahi opsi peralihan.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| link | Basis | Jangkar bergaya dengan garis bawah dan warna |
| link-hover | Gaya | Garis bawah hanya terlihat saat mengarahkan kursor |
| link-xs | Ukuran | Sangat kecil |
| link-sm | Ukuran | Kecil |
| link-md | Ukuran | Sedang (standar) |
| link-lg | Ukuran | Besar |
| link-xl | Ukuran | Ekstra besar |
| link-2xl | Ukuran | 2× ekstra besar |
| link-primary | Warna | Warna tema utama |
| link-secondary | Warna | Warna tema sekunder |
| link-accent | Warna | Warna tema aksen |
| link-neutral | Warna | Warna tema netral |
| link-info | Warna | Info warna semantik |
| link-success | Warna | Warna semantik sukses |
| link-warning | Warna | Warna semantik peringatan |
| link-error | Warna | Kesalahan warna semantik |
Penggunaan Dasar
Warna Tautan
Terapkan warna tautan semantik agar sesuai dengan tema Anda atau untuk menyampaikan makna (seperti menggunakan link-error untuk tindakan merusak atau link-success untuk konfirmasi).
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> |
Ukuran Tautan
Skalakan hyperlink Anda agar sesuai dengan tipografi di sekitarnya. Kelas utilitas ini berkisar dari ekstra kecil untuk teks "legal" footer hingga 2X besar untuk bagian pahlawan berdampak tinggi.
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> |
Tautan Status Arahkan
Secara default, Anda dapat memilih untuk menyembunyikan garis bawah dan hanya menampilkannya saat mengarahkan kursor. Ini adalah pola desain umum untuk menu navigasi dan sidebar dasbor yang lebih rapi.