UI 블록 및 섹션 - 더욱 빠르게 구축
CSS 전용 Tailwind CSS UI 블록 및 섹션. JavaScript 없음, WCAG AA 액세스 가능, 프레임워크에 구애받지 않음. 영웅, 헤더, 가격 섹션 및 기능 블록을 복사하여 붙여넣습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
블록은 Frutjam 구성요소로 조립된 즉시 제작 가능한 페이지 섹션입니다. 각 블록은 자체 포함된 HTML입니다. Django 템플릿, Laravel Blade 파일, HTMX 페이지 또는 React 구성 요소에 놓으면 즉시 작동합니다. 블록은 활성 Frutjam 테마를 자동으로 상속하므로 밝은 테마, 어두운 테마 또는 사용자 정의 테마 간 전환 시 블록 HTML을 변경할 필요가 없습니다. 모든 블록은 CSS 전용이고 WCAG AA에 액세스할 수 있으며 Tailwind CSS v4용으로 제작되었습니다. 즉, JavaScript가 없고 Tailwind 자체 이외의 빌드 파이프라인이 없습니다.
헤더
탐색 모음, 브랜딩 및 모바일 서랍이 포함된 CSS 전용 Tailwind CSS 헤더 블록입니다. 고정적이고 투명하며 반응성이 뛰어난 레이아웃 변형입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
영웅
CSS 전용 Tailwind CSS 히어로 블록 — 중앙 정렬, 분할 및 이미지 레이아웃이 포함된 기성 랜딩 페이지 섹션입니다. JavaScript가 필요하지 않으며 WCAG AA에 액세스할 수 있습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
가격
카드 및 버튼 구성요소로 구축된 CSS 전용 Tailwind CSS 가격 블록입니다. 계층, 기능 목록, CTA가 포함된 가격표를 복사하여 붙여넣으세요. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
블록이란 무엇입니까?
블록은 Frutjam 구성 요소를 함께 구성하여 만들어진 더 크고 미리 만들어진 페이지 섹션입니다. 구성 요소가 단일 UI 요소(버튼, 카드, 배지)인 경우 블록은 프로젝트에 복사하여 붙여넣을 수 있는 완전한 레이아웃 섹션(히어로, 가격표, 사이트 헤더)입니다.
CSS 전용
모든 블록은 Frutjam 구성 요소와 Tailwind CSS 유틸리티로 구축됩니다. JavaScript가 없고 추가 종속성이 없습니다.
복사-붙여넣기 준비됨
각 블록은 자체 포함된 HTML입니다. Django 템플릿, Laravel Blade, HTMX 페이지 또는 React 구성 요소에 붙여넣습니다.
테마 인식
블록은 활성 Frutjam 테마를 자동으로 상속합니다. 테마를 전환하면 모든 블록이 변경 없이 업데이트됩니다.
블록과 구성 요소의 차이점은 무엇입니까?
구성 요소는 버튼, 카드, 배지 등 재사용 가능한 단일 UI 요소입니다. 블록은 히어로 섹션, 가격표, 탐색 표시줄이 있는 사이트 헤더, 모바일 서랍 등 여러 구성요소를 레이아웃으로 구성하는 완전한 페이지 섹션입니다. 구성 요소를 사용하여 사용자 정의 레이아웃을 구축합니다. 빠른 페이지 조립을 위해 블록을 사용합니다.
블록은 Django, HTMX 및 Laravel에서 작동합니까?
예 — 블록은 Frutjam 구성 요소 클래스를 사용하는 일반 HTML입니다. Django, HTMX, Laravel Blade, Rails ERB, Jinja2 또는 정적 HTML 등 모든 템플릿 시스템에서 작동합니다. JavaScript 프레임워크도 없고 Tailwind CSS 자체 이상의 빌드 단계도 없습니다.
블록이 더 추가되나요?
예. 새 블록이 정기적으로 추가됩니다. Pro 및 Team 플랜에는 기능 섹션, 고객 평가, CTA 및 전체 페이지 템플릿을 포함한 프리미엄 블록에 대한 액세스가 포함됩니다.