Componente de link
Última atualização:
Link CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e neutras. Passe o sublinhado e estilos simples. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Vincule elementos âncora de estilo de componentes com hierarquia visual e significado semântico. O sistema de link Frutjam oferece suporte a várias cores, efeitos de foco, tamanhos e opções de decoração por meio de classes de utilitário CSS Tailwind. Perfeitos para links de texto, navegação e elementos de call to action, os links mantêm os padrões de acessibilidade com gerenciamento de foco adequado e opções de alternância de sublinhado.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| link | Base | Âncora estilizada com sublinhado e cor |
| link-hover | Estilo | Sublinhado visível apenas ao passar o mouse |
| link-xs | Tamanho | Extra pequeno |
| link-sm | Tamanho | Pequeno |
| link-md | Tamanho | Médio (padrão) |
| link-lg | Tamanho | Grande |
| link-xl | Tamanho | Extra grande |
| link-2xl | Tamanho | 2× extra grande |
| link-primary | Cor | Cor do tema principal |
| link-secondary | Cor | Cor do tema secundário |
| link-accent | Cor | Cor do tema de destaque |
| link-neutral | Cor | Cor neutra do tema |
| link-info | Cor | Cor semântica da informação |
| link-success | Cor | Cor semântica de sucesso |
| link-warning | Cor | Cor semântica de aviso |
| link-error | Cor | Cor semântica do erro |
Uso Básico
<a class="link">Link</a> |
<a className="link">Link</a> |
Cores dos links
Aplique cores de links semânticos para combinar com seu tema ou para transmitir significado (como usar link-error para ações destrutivas ou link-success para confirmação).
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> |
Tamanhos de links
Dimensione seus hiperlinks para corresponder à tipografia ao redor. Essas classes de utilidade variam de extra pequeno para texto "legal" de rodapé a 2X grande para seções de herói de alto impacto.
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> |
Estado de passagem do link
Por padrão, você pode optar por ocultar o sublinhado e revelá-lo apenas ao passar o mouse. Este é um padrão de design comum para menus de navegação e barras laterais do painel mais limpos.
<a class="link link-hover">Hover this link</a> |