Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Thành phần anh hùng

Cập nhật lần cuối:

Phần CSS CSS Tailwind chỉ dành cho CSS dành cho trang đích. Bố cục toàn chiều rộng với tiêu đề, mô tả và CTA ở giữa. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần chính tạo ra các phần có chiều rộng đầy đủ, bắt mắt để giới thiệu trang hoặc sản phẩm của bạn bằng hình ảnh và thông điệp hấp dẫn. Được xây dựng bằng HTML ngữ nghĩa và bố cục linh hoạt, các phần chính sẽ tạo nên sự tương tác của người dùng. Hệ thống anh hùng Frutjam hỗ trợ nhiều nền, lớp phủ và căn chỉnh phản hồi—lý tưởng cho các trang đích, giới thiệu sản phẩm và thông báo nổi bật.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
heroCăn cứPhần có chiều rộng đầy đủ với nội dung được căn giữa
hero-contentCông cụ sửa đổiKhu vực nội dung bên trong với bố cục linh hoạt
hero-overlayCông cụ sửa đổiLớp phủ bán trong suốt cho hình nền

Cách sử dụng cơ bản

Tạo phần chính đơn giản với nội dung văn bản được căn giữa và lời kêu gọi hành động.

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>

Anh hùng với lớp phủ

Thêm lớp phủ màu cho các phần chính bằng hình nền để cải thiện khả năng đọc văn bản.

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>

Bố cục anh hùng

Tạo các phần anh hùng đáp ứng với cách sắp xếp nội dung khác nhau.

Anh hùng bằng hình ảnh (Nội dung + Hình ảnh)

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>

Anh hùng với hình ảnh (Đảo ngược)

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>

Anh hùng có hình thức

Kết hợp các phần chính với biểu mẫu đăng ký hoặc liên hệ cho các trang đích tập trung vào chuyển đổi.

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>

Xếp chồng đáp ứng anh hùng

Các phần anh hùng tự động xếp chồng trên thiết bị di động và sắp xếp theo chiều ngang trên màn hình lớn hơn.

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp anh hùng chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP