Enlace CSS Tailwind solo CSS con variantes de color primario, secundario, de acento y neutro. Coloca el cursor sobre los estilos subrayados y lisos. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de enlace diseñan elementos de anclaje con jerarquía visual y significado semántico. El sistema de enlaces de Frutjam admite múltiples colores, efectos de desplazamiento, tamaños y opciones de decoración a través de las clases de utilidad Tailwind CSS. Perfectos para enlaces de texto, navegación y elementos de llamado a la acción, los enlaces mantienen los estándares de accesibilidad con una gestión de enfoque adecuada y opciones de alternancia de subrayado.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| link | Base | Ancla estilizada con subrayado y color. |
| link-hover | Estilo | Subrayado visible solo al pasar el cursor |
| link-xs | Tamaño | extrapequeño |
| link-sm | Tamaño | Pequeño |
| link-md | Tamaño | Medio (predeterminado) |
| link-lg | Tamaño | Grande |
| link-xl | Tamaño | Extra grande |
| link-2xl | Tamaño | 2× extra grande |
| link-primary | Color | Color del tema principal |
| link-secondary | Color | Color del tema secundario |
| link-accent | Color | Color del tema de acento |
| link-neutral | Color | Color de tema neutro |
| link-info | Color | Color semántico de información |
| link-success | Color | Color semántico del éxito |
| link-warning | Color | Color semántico de advertencia |
| link-error | Color | Color semántico del error |
Uso básico
<a class="link">Link</a> |
<a className="link">Link</a> |
Colores de enlace
Aplique colores de enlace semánticos para que coincidan con su tema o para transmitir significado (como usar link-error para acciones destructivas o link-success para confirmación).
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> |
Tamaños de enlace
Escale sus hipervínculos para que coincidan con la tipografía circundante. Estas clases de utilidad van desde extra pequeñas para texto "legal" de pie de página hasta 2 veces más grandes para secciones destacadas 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 desplazamiento del enlace
De forma predeterminada, puede optar por ocultar el subrayado y mostrarlo solo al pasar el mouse. Este es un patrón de diseño común para menús de navegación y barras laterales del tablero más limpios.
<a class="link link-hover">Hover this link</a> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Enlace según sea necesario. No más clases alucinadas.