링크 구성요소

기본, 보조, 강조 및 중립 색상 변형이 포함된 CSS 전용 Tailwind CSS 링크입니다. 밑줄 및 일반 스타일을 가리킵니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

시각적 계층 구조와 의미론적 의미를 지닌 링크 구성 요소 스타일 앵커 요소입니다. Frutjam 링크 시스템은 Tailwind CSS 유틸리티 클래스를 통해 다양한 색상, 호버 효과, 크기 및 장식 옵션을 지원합니다. 텍스트 링크, 탐색 및 클릭 유도 문구 요소에 적합한 링크는 적절한 포커스 관리 및 밑줄 토글 옵션을 통해 접근성 표준을 유지합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

기본 사용법

<a class="link">Link</a>

<a className="link">Link</a>

링크 색상

테마와 일치하거나 의미를 전달하기 위해 의미론적 링크 색상을 적용합니다(예: 파괴적인 작업에는 link-error 사용, 확인에는 link-success 사용).

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>

링크 크기

주변 서체와 일치하도록 하이퍼링크의 크기를 조정하세요. 이러한 유틸리티 클래스는 바닥글 "법적" 텍스트를 위한 매우 작은 크기부터 영향력이 큰 영웅 섹션을 위한 2배 큰 크기까지 다양합니다.

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>

링크 호버 상태

기본적으로 밑줄을 숨기고 마우스를 올리면 표시되도록 선택할 수 있습니다. 이는 더욱 깔끔한 탐색 메뉴 및 대시보드 사이드바를 위한 일반적인 디자인 패턴입니다.

<a class="link link-hover">Hover this link</a>