跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Hero Component

CSS-only Tailwind CSS hero section for landing pages. Full-width layout with centered heading, description, and CTA. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

英雄組件創建引人注目的全角部分，透過引人注目的視覺效果和訊息傳遞來介紹您的頁面或產品。英雄部分採用語義 HTML 和靈活的佈局構建，為用戶參與定下了基調。 Frutjam 英雄系統支援多種背景、疊加和響應式對齊，非常適合登陸頁面、產品發布和重要公告。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
hero根據內容居中的全角部分
hero-content修飾符具有彈性佈局的內部內容區域
hero-overlay修飾符背景影像的半透明疊加

基本用法

建立一個簡單的英雄部分，其中包含居中的文字內容和號召性用語。

Hello there

Introduce your product or service with compelling messaging that resonates with your audience.

1
2
3
4
5
6
7
8
9
<div class="hero min-h-screen bg-base-200">
  <div class="hero-content text-center">
    <div class="max-w-md">
      <h1 class="text-5xl font-bold">Hello there</h1>
      <p class="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
<div className="hero min-h-screen bg-base-200">
  <div className="hero-content text-center">
    <div className="max-w-md">
      <h1 className="text-5xl font-bold">Hello there</h1>
      <p className="py-6">Introduce your product or service with compelling messaging that resonates with your audience.</p>
      <button className="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

覆蓋英雄

為具有背景圖像的英雄部分添加顏色疊加，以提高文字可讀性。

Featured Content

Combine gradient backgrounds with overlay effects for visual depth.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="hero min-h-screen bg-base-200">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-on-neutral">
    <div class="max-w-md">
      <h1 class="mb-5 text-5xl font-bold">Featured Content</h1>
      <p class="mb-5">Combine gradient backgrounds with overlay effects for visual depth.</p>
      <button class="btn btn-primary">Explore</button>
    </div>
  </div>
</div>

英雄佈局

創建具有不同內容安排的響應式英雄部分。

英雄與圖像（內容+圖像）

Product

Amazing Product

Display product images alongside descriptive content for engaging hero sections on larger screens.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=320&height=240">
      <img src="https://cdn.frutjam.com/images/photo-1.jpg?format=webp&width=480&height=360" alt="Product" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" />
    </picture>
    <div>
      <h1 class="text-5xl font-bold">Amazing Product</h1>
      <p class="py-6">Display product images alongside descriptive content for engaging hero sections on larger screens.</p>
      <button class="btn btn-primary">Learn More</button>
    </div>
  </div>
</div>

英雄與圖像（反向）

Showcase

Showcase

Reverse layout places image on the right side for alternative visual hierarchy.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <picture>
      <source media="(max-width: 640px)" srcset="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=320&height=240">
      <img src="https://cdn.frutjam.com/images/photo-2.jpg?format=webp&width=480&height=360" alt="Showcase" class="max-w-sm rounded-lg shadow-2xl" loading="lazy" />
    </picture>
    <div>
      <h1 class="text-5xl font-bold">Showcase</h1>
      <p class="py-6">Reverse layout places image on the right side for alternative visual hierarchy.</p>
      <button class="btn btn-primary">View Details</button>
    </div>
  </div>
</div>

英雄與形式

將英雄部分與註冊表單或聯絡表單結合起來，形成以轉換為重點的登陸頁面。

Subscribe Now

Join our community and get updates on the latest features and news.

Get Started

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <div class="text-center lg:text-left max-w-md">
      <h1 class="text-5xl font-bold">Subscribe Now</h1>
      <p class="py-6">Join our community and get updates on the latest features and news.</p>
    </div>
    <div class="card bg-base-100 shadow-xl shrink-0 w-full max-w-sm">
      <div class="card-content">
        <h2 class="card-title">Get Started</h2>
        <input type="email" placeholder="Enter your email" class="input input-outline w-full mb-4">
        <button class="btn btn-primary w-full">Subscribe</button>
      </div>
    </div>
  </div>
</div>

英雄響應式堆疊

英雄部分會自動堆疊在行動裝置上，並在較大的螢幕上水平排列。

Responsive Hero

This layout automatically adapts to different screen sizes for optimal viewing on all devices.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col">
    <div class="text-center max-w-lg">
      <h1 class="text-4xl md:text-5xl font-bold">Responsive Hero</h1>
      <p class="py-6">This layout automatically adapts to different screen sizes for optimal viewing on all devices.</p>
      <button class="btn btn-primary">Get Started</button>
      <button class="btn btn-ghost">Learn More</button>
    </div>
  </div>
</div>