2.2 Komponentenbibliothek (Globale Widgets & Patterns)
Definiert einheitliche Schriftgrößen, Abstände und Einheiten, um optische Konsistenz und saubere Responsive-Layouts sicherzustellen.
Inhaltsverzeichnis
A. Warum Komponenten?
Komponenten (globale Widgets) sichern einheitliches Design über das gesamte Projekt. Änderungen an einem Ort wirken überall.
B. Typische Komponenten
- Buttons (Primär / Sekundär / Textlink)
- Cards (Bild + Text + CTA)
- Hero-Sektionen
- Contact-Blöcke (Form + Text)
C. Anlage & Pflege
- Baue die Komponente auf einer leeren Seite
- Rechtsklick → Als globales Widget speichern
- Namen z. B. „Card – Textbild“
- Bei Änderungen: Widget bearbeiten → Aktualisieren
Tipp
Erstelle eigene Kategorie: Flowly Components → alle globalen Widgets dort einsortieren.
- Globale Typo verwenden
- Nur Margin-Bottom für Abstände
- Keine verschachtelten Container