Nur CSS Tailwind CSS Hero-Blöcke – vorgefertigte Landingpage-Abschnitte mit zentriertem, geteiltem und Bild-Layout. Kein JavaScript erforderlich, WCAG AA zugänglich. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Vorgefertigte Hero-Layouts, erstellt mit der hero-Komponente , button und badge.
Zentrierter Held
Build something great
Start fast with accessible, themeable components that work with any stack.
1 2 3 4 5 6 7 8 9 10 11 12 | <section class="hero min-h-[60vh]"> <div class="hero-content text-center"> <div class="max-w-lg"> <h1 class="heading-5xl mb-4">Build something great</h1> <p class="para opacity-60 mb-8">Start fast with accessible, themeable components that work with any stack.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Get started</a> <a href="#" class="btn btn-outline btn-lg">Learn more</a> </div> </div> </div> </section> |
Held mit Abzeichen
Ship UI that scales
Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh] bg-base-200"> <div class="hero-content text-center"> <div class="max-w-xl"> <div class="flex justify-center mb-5"> <span class="badge badge-primary badge-soft badge-sm">Now in v2.0</span> </div> <h1 class="heading-5xl mb-4">Ship UI that scales</h1> <p class="para opacity-60 mb-8">Copy-paste components built on real CSS standards — semantic, accessible, and ready for production.</p> <div class="flex flex-wrap justify-center gap-3"> <a href="#" class="btn btn-primary btn-lg">Start building</a> <a href="#" class="btn btn-ghost btn-lg">View docs</a> </div> </div> </div> </section> |
Gespaltener Held
Components that scale with your product
From prototype to production — get the building blocks to ship faster without sacrificing quality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <section class="hero min-h-[60vh]"> <div class="hero-content flex-col lg:flex-row gap-12"> <div class="max-w-md"> <h1 class="heading-4xl mb-4">Components that scale with your product</h1> <p class="para opacity-60 mb-8">From prototype to production — get the building blocks to ship faster without sacrificing quality.</p> <div class="flex flex-wrap gap-3"> <a href="#" class="btn btn-primary">Explore components</a> <a href="#" class="btn btn-outline">See examples</a> </div> </div> <div class="card card-lg w-full max-w-sm aspect-video flex items-center justify-center"> <span class="para opacity-40">Visual area</span> </div> </div> </section> |
Gradient-Held
Ein Held mit einem radialen Farbverlaufsakzent und abgeschnittenem Überschriftentext für einen modernen, eleganten Look.
Build faster with
beautiful UI
A standards-first component system. Semantic, accessible, and ready to ship.
Gespaltener Held
Ein zweispaltiges Layout mit Inhalten auf der einen und visuellen Elementen auf der anderen Seite – ideal für Produktpräsentationen.
Components that scale with your product
From prototype to production — Frutjam gives you the building blocks to ship faster without sacrificing quality.
Held mit sozialem Beweis
Stärken Sie das Vertrauen mit Benutzer-Avataren und einer Sternebewertung unterhalb des primären Call-to-Action.
Ship UI faster, with confidence
Copy-paste components that are accessible, themeable, and built on real CSS standards.
Loved by developers worldwide
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.