Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Heldenkomponente

Zuletzt aktualisiert:

Nur CSS-basierter Tailwind-CSS-Hero-Bereich für Landingpages. Layout in voller Breite mit zentrierter Überschrift, Beschreibung und CTA. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Hero-Komponenten erstellen auffällige Abschnitte in voller Breite, die Ihre Seite oder Ihr Produkt mit überzeugenden Bildern und Botschaften vorstellen. Mit semantischem HTML und flexiblen Layouts erstellt, geben Hero-Abschnitte den Ton für die Benutzerinteraktion an. Das Frutjam Hero-System unterstützt mehrere Hintergründe, Overlays und responsive Ausrichtungen – ideal für Landingpages, Produkteinführungen und prominente Ankündigungen.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
heroBaseAbschnitt in voller Breite mit zentriertem Inhalt
hero-contentModifikatorInnerer Inhaltsbereich mit flexiblem Layout
hero-overlayModifikatorHalbtransparente Überlagerung für Hintergrundbilder

Grundlegende Verwendung

Erstellen Sie einen einfachen Heldenabschnitt mit zentriertem Textinhalt und Handlungsaufforderung.

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>

Held mit Overlay

Fügen Sie Heldenabschnitten mit Hintergrundbildern eine Farbüberlagerung hinzu, um die Lesbarkeit des Textes zu verbessern.

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>

Heldenlayouts

Erstellen Sie responsive Heldenabschnitte mit unterschiedlichen Inhaltsanordnungen.

Held mit Bild (Inhalt + Bild)

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>

Held mit Bild (Rückseite)

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>

Held mit Form

Kombinieren Sie Hero-Bereiche mit Anmelde- oder Kontaktformularen für konversionsorientierte Landingpages.

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>

Helden-Responsive-Stacking

Heldenabschnitte werden auf Mobilgeräten automatisch gestapelt und auf größeren Bildschirmen horizontal angeordnet.

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Held-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP