---
title: "Hero"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Hero section with centered, split, and overlay layouts. Semantic HTML with CTA buttons and media support for high-converting landing pages."
url: https://frutjam.com/vi/components/hero
---

# Hero Component

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ả                                           |
| ------------ | --------------- | ---------------------------------------------------- |
| hero         | Căn cứ          | Phần có chiều rộng đầy đủ với nội dung được căn giữa |
| hero-content | Công cụ sửa đổi | Khu vực nội dung bên trong với bố cục linh hoạt      |
| hero-overlay | Công cụ sửa đổi | Lớ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.

## 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
<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
<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
<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
<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
<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>
```