Design · Bausteine-Dossier

Bereich

Website- & App-Elemente

Die einzelnen Bau-Elemente nach Oberbegriff. Ein Klick öffnet die Seite mit allen Bausteinen dieses Typs — Live-Vorschau und Copy-Code.

Oberbegriffe 6

Buttons

Sweep, Solid/Ghost/Glass, Neomorph, Flip, Liquid, Ripple, Border-Beam, Cursor-Glow, 3D-Push, Icon-Pill.

14 Bausteine →

Ankreuzhäckchen

Checkbox, Switch, Consent-Box — alles zum Ankreuzen und Zustimmen.

auf Formular-Seite →

Ausfüllfelder

Eingabefelder mit Fokus-Ring, Wizard/mehrschrittig, Fortschrittsanzeige.

auf Formular-Seite →

Animationen

Reveal, Marquee, Karussells, Cardslider, Clip-/Text-Reveal, Karten-Reveal.

auf Bewegungs-Seite →

Hover

Karte hell, Glas-Overlay, Shine, Puls-Glow, Rotation, Tooltip.

14 Bausteine →

Scrolleffekte

Parallax, Sticky-Stack, Pin-&-Scrub, Farbwechsel beim Scrollen.

auf Bewegungs-Seite →

Hinweis: „Ankreuzhäckchen" & „Ausfüllfelder" liegen aktuell gemeinsam auf der Formular-Seite, „Animationen" & „Scrolleffekte" gemeinsam auf der Bewegungs-Seite. Die Aufteilung in je eigene Seiten ist als kleiner Folgeschritt vorgesehen.

Weitere Elemente 6 Kategorien

Karten

Service-, Liquid-Glass-, Projekt-, Pop-Karten, Avatar-Gruppe, Flip-Karte.

17 Bausteine →

Popups & Modale

Lead-Popup, Cookie-Consent, FAB, datengetriebenes Modal, Chatbot.

9 Bausteine →

FAQ / Akkordeon

Natives <details>, JS-Akkordeon mit „Mehr anzeigen".

5 Bausteine →

Grundlagen

Skip-Link, Fokus-Ring, Theme-Toggle, sr-only, reduced-motion.

11 Bausteine →

Einbettungen & Consent

DSGVO Click-to-Load-Map, Auto-hide-Social-Links.

4 Bausteine →

Templates & Layouts

Vorher/Nachher, Zigzag, CSS-Tabs, Blog, Hub, Legal/Impressum/Datenschutz.

19 Bausteine →