Bausteine zum Nachschlagen — nicht zum Würfeln.
Fertige Vanilla-Bausteine aus reinem HTML/CSS/JS — aus meinen eigenen Projekten geerntet und nach Vorbildern nachgebaut. Jeder mit Live-Vorschau und Copy-Code, in sich abgeschlossen, barrierefrei und ohne externe Ressourcen.
- Vanilla HTML/CSS/JS
- barrierefrei
- DSGVO-clean
- Akzent per
--akzent
Durchsucht Name, Kategorie und Anlass aller Bausteine.
Vier Bereiche
Webdesign
Ganze Website Block für Block: Header, Hero, Über uns, Bewertung, Team, Kontakt, Footer — plus fertige Nebenseiten-Layouts.
Seiten-Sektionen & Layouts →Icons
Animierte & statische Inline-SVG-Icons im Lucide-Stil — Zeichnen-, Loop- und Hover-Animationen, je Icon vier Varianten, in einer Zeile umfärbbar.
Animiert & Normal →Website- & App-Elemente
Buttons, Ankreuzhäckchen, Ausfüllfelder, Animationen, Hover, Scrolleffekte — je ein Oberbegriff, ein Klick zur Element-Seite.
Bausteine nach Oberbegriff →Mobile
Layouts speziell für die Handy-Ansicht — Sticky-Header, Drawer, Bottom-Nav, Kategorie-Tabs, Hero, Flip-Karte, Grid-Kollaps, Slider, Sticky-CTA, Cookie/Toast, Touch-Buttons, Formular.
13 Bausteine →Welcher Stil für welchen Anlass?
Kein Einheitslook — der richtige Pol für den jeweiligen Zweck.
| Anlass | Stil / Pol | Vorbilder |
|---|---|---|
| Kunden-/Conversion-Seite (Handwerk, Dienstleistung, Shop-LP) | Pol 2 — Klarheit: ruhig, klar strukturiert, Effekte sparsam | BYD, C24 |
| Marken-/Premium-/Tech-Auftritt | Pol 1 dosiert: edle Micro-Interaktionen auf ruhiger Basis | animate-ui |
| Komponenten-/Portfolio-Showcase | Pol 1 voll: viel Craft, Effekte als Inhalt | aceternity, uiverse |
| App / Dashboard | Pol 2 strikt: Struktur, Übersicht, starkes Dashboard | C24-App |