仅 CSS Tailwind CSS 英雄块 — 具有居中、分割和图像布局的现成着陆页部分。无需 JavaScript，可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。
使用 hero 组件 、button 和 badge 构建的现成英雄布局。
中心英雄
Build something great
Start fast with accessible, themeable components that work with any stack.
1 2 3 4 5 6 7 8 9 10 11 12 | <section class="hero min-h-[60vh]"> <div class="hero-content text-center"> <div class="max-w-lg"> <h1 class="heading-5xl mb-4">Build something great</h1> <p class="para opacity-60 mb-8">Start fast with accessible, themeable components that work with any stack.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Get started</a> <a href="#" class="btn btn-outline btn-lg">Learn more</a> </div> </div> </div> </section> |
英雄与徽章
Ship UI that scales
Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh] bg-base-200"> <div class="hero-content text-center"> <div class="max-w-xl"> <div class="flex justify-center mb-5"> <span class="badge badge-primary badge-soft badge-sm">Now in v2.0</span> </div> <h1 class="heading-5xl mb-4">Ship UI that scales</h1> <p class="para opacity-60 mb-8">Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Start building</a> <a href="#" class="btn btn-ghost btn-lg">View docs</a> </div> </div> </div> </section> |
分裂英雄
Components that scale with your product
From prototype to production — get the building blocks to ship faster without sacrificing quality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh]"> <div class="hero-content flex-col lg:flex-row gap-12"> <div class="max-w-md"> <h1 class="heading-4xl mb-4">Components that scale with your product</h1> <p class="para opacity-60 mb-8">From prototype to production — get the building blocks to ship faster without sacrificing quality.</p> <div class="flex flex-wrap gap-3"> <a href="#" class="btn btn-primary">Explore components</a> <a href="#" class="btn btn-outline">See examples</a> </div> </div> <div class="card card-lg w-full max-w-sm aspect-video flex items-center justify-center"> <span class="para opacity-40">Visual area</span> </div> </div> </section> |
渐变英雄
具有径向渐变口音和渐变剪辑标题文本的英雄，打造现代、优雅的外观。
Build faster with
beautiful UI
A standards-first component system. Semantic, accessible, and ready to ship.
分裂英雄
两栏布局，一侧为内容，另一侧为视觉效果 - 非常适合产品展示。
Components that scale with your product
From prototype to production — Frutjam gives you the building blocks to ship faster without sacrificing quality.
有社会证明的英雄
通过用户头像和低于主要号召性用语的星级评级来加强信任。
Ship UI faster, with confidence
Copy-paste components that are accessible, themeable, and built on real CSS standards.
Loved by developers worldwide
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 英雄 类名称和结构。不再有幻觉课程。