Tautan CSS Tailwind khusus CSS dengan varian warna primer, sekunder, aksen, dan netral. Arahkan kursor ke garis bawah dan gaya polos. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
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
<a class="link">Link</a> |
<a className="link">Link</a> |
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.
<a class="link link-hover">Hover this link</a> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Link yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.