Skip to main content
Frutjam logoFrutjam
v2.2.6
Theme

英雄

最后更新:

仅 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.

Get started Learn more
html
 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>

英雄与徽章

Now in v2.0

Ship UI that scales

Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.

Start building View docs
html
 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.

Explore components See examples
Visual area
html
 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>

使用 Claude Code、Cursor 或其他 AI 编辑器？

Cherry MCP 为您的 AI 编辑器按需提供准确的 英雄 类名称和结构。不再有幻觉课程。

尝试Cherry MCP