UI-Blöcke und -Abschnitte – schneller erstellen
Nur CSS-CSS-UI-Blöcke und -Abschnitte von Tailwind. Kein JavaScript, WCAG AA zugänglich, Framework-unabhängig. Kopieren Sie Helden, Überschriften, Preisabschnitte und Funktionsblöcke und fügen Sie sie ein. Funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Blöcke sind produktionsfertige Seitenabschnitte, die aus Frutjam-Komponenten zusammengesetzt sind. Jeder Block ist eigenständiger HTML-Code – fügen Sie ihn in eine beliebige Django-Vorlage, Laravel Blade-Datei, HTMX-Seite oder React-Komponente ein und er funktioniert sofort. Blöcke erben Ihr aktives Frutjam-Design automatisch, sodass für den Wechsel zwischen hell, dunkel oder einem benutzerdefinierten Design keine Änderungen am Block-HTML erforderlich sind. Alle Blöcke sind nur CSS, WCAG AA zugänglich und für Tailwind CSS v4 erstellt – kein JavaScript, keine Build-Pipeline über Tailwind selbst hinaus.
Kopfzeile
Nur CSS-CSS-Header-Blöcke von Tailwind mit Navigationsleiste, Branding und mobiler Schublade. Klebrige, transparente und responsive Layoutvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Held
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.
Preise
Nur CSS-Tailwind-CSS-Preisblöcke, die aus Karten- und Schaltflächenkomponenten bestehen. Preistabellen mit Stufen, Funktionslisten und CTAs kopieren und einfügen. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Was sind Blöcke?
Blöcke sind größere, vorgefertigte Seitenabschnitte, die durch Zusammensetzen von Frutjam-Komponenten erstellt werden. Während eine Komponente ein einzelnes UI-Element (eine Schaltfläche, eine Karte, ein Abzeichen) ist, ist ein Block ein vollständiger Layoutabschnitt – ein Held, eine Preistabelle, ein Site-Header – der zum Kopieren und Einfügen in Ihr Projekt bereit ist.
Nur CSS
Jeder Block wird mit Frutjam-Komponenten und Tailwind-CSS-Dienstprogrammen erstellt – kein JavaScript, keine zusätzlichen Abhängigkeiten.
Fertig zum Kopieren und Einfügen
Jeder Block ist eigenständiges HTML. Fügen Sie es in eine beliebige Django-Vorlage, Laravel Blade, HTMX-Seite oder React-Komponente ein.
Themenbewusst
Blöcke erben Ihr aktives Frutjam-Design automatisch – wechseln Sie das Design und alle Blöcke werden aktualisiert, ohne dass Änderungen erforderlich sind.
Was ist der Unterschied zwischen einem Block und einer Komponente?
Eine Komponente ist ein einzelnes wiederverwendbares UI-Element – eine Schaltfläche, eine Karte, ein Abzeichen. Ein Block ist ein vollständiger Seitenabschnitt, der mehrere Komponenten zu einem Layout zusammenfasst – einen Heldenabschnitt, eine Preistabelle, einen Site-Header mit Navigationsleiste und eine mobile Schublade. Verwenden Sie Komponenten, um benutzerdefinierte Layouts zu erstellen. Verwenden Sie Blöcke für eine schnelle Seitenzusammenstellung.
Funktionieren Blöcke mit Django, HTMX und Laravel?
Ja – Blöcke sind reines HTML und verwenden Frutjam-Komponentenklassen. Sie funktionieren in jedem Vorlagensystem: Django, HTMX, Laravel Blade, Rails ERB, Jinja2 oder statisches HTML. Kein JavaScript-Framework, kein Build-Schritt über Tailwind CSS hinaus.
Werden weitere Blöcke hinzugefügt?
Ja – es werden regelmäßig neue Blöcke hinzugefügt. Die Pro- und Team-Pläne beinhalten den Zugriff auf Premium-Blöcke einschließlich Funktionsabschnitten, Testimonials, CTAs und ganzseitigen Vorlagen.