---
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/pl/components/hero
---

# Hero Component

Komponenty bohatera tworzą przyciągające wzrok sekcje o pełnej szerokości, które przedstawiają Twoją stronę lub produkt za pomocą atrakcyjnych efektów wizualnych i komunikatów. Sekcje główne, zbudowane w oparciu o semantyczny kod HTML i elastyczne układy, nadają ton zaangażowaniu użytkowników. System bohater Frutjam obsługuje wiele teł, nakładek i responsywnych dopasowań — idealnie nadaje się do stron docelowych, premier produktów i widocznych ogłoszeń.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa        | Typ         | Opis                                                  |
| ------------ | ----------- | ----------------------------------------------------- |
| hero         | Opierać     | Sekcja o pełnej szerokości z wyśrodkowaną zawartością |
| hero-content | Modyfikator | Wewnętrzny obszar treści z elastycznym układem        |
| hero-overlay | Modyfikator | Półprzezroczysta nakładka na obrazy tła               |

## Podstawowe użycie

Utwórz prostą sekcję bohatera z wyśrodkowaną treścią tekstową i wezwaniem do działania.

## Bohater z nakładką

Dodaj kolorową nakładkę do sekcji głównych z obrazami tła, aby poprawić czytelność tekstu.

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

## Układy bohaterów

Twórz responsywne sekcje bohaterów z różnymi aranżacjami treści.

### Bohater z obrazem (treść + obraz)

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

### Bohater z obrazem (rewers)

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

## Bohater z formą

Połącz sekcje główne z formularzami rejestracyjnymi lub kontaktowymi, aby uzyskać strony docelowe nastawione na konwersję.

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

## Responsywne układanie bohaterów

Sekcje bohaterów automatycznie układają się w stosy na urządzeniach mobilnych i układają poziomo na większych ekranach.

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