Komponenten
112 Varianten von 49 Bausteinen – nach Typ sortiert. Jede Variante zeigt ihren Namen und den technischen Block-Namen.
Inhaltsverzeichnis
Alle Varianten
Ein Klick springt direkt zur Variante.
Einstieg & Seitenköpfe
Hero-Varianten, Video-Hero, Praxis-Header, Seiten-Header und Call-to-Action.
-
Hero – EinstiegGeteilt: Text + Bild mit Live-Status
-
Hero – EinstiegVollbild-Bild mit Text
-
Hero – EinstiegNur Text mit Breadcrumb & Badges (Unterseiten)
-
Hero – Vollbild-VideoBildschirmfüllend, Text unten links
-
Hero – Vollbild-Video80 % Höhe, Text mittig, Fläche
-
Praxis-Header – Foto & PraxisinfosFoto links, Glas-Karte
-
Praxis-Header – Foto & PraxisinfosFoto rechts, dunkle Karte, randlos
-
Seiten-HeaderMittel, Bild mit Übergang, Breadcrumb unten
-
Seiten-HeaderKompakt, Display-Titel, ohne Linie
-
CTA – AbschlussBildschirmfüllend, Verlauf folgt dem Zeiger
-
CTA – AbschlussGroß, magnetischer Button, Primärfarbe
-
CTA – AbschlussKompakt, ohne Effekt
-
Header mit Bild/Video & DetailboxVorteile rechts unten, Box ragt in den Header
-
Call-to-Action mit BildKarte, sanfter Zoom beim Überfahren
Texte & Inhalte
Text, Text + Bild, Hinweisboxen, Listen-Zeilen, Accordion, Tabs, Tabellen.
-
Text – Einleitung & StatementGeteilt (Headline links, Text rechts)
-
Text – Einleitung & StatementGestapelt, 3 Textspalten
-
Text – Einleitung & StatementZentriert
-
Text – Einleitung & StatementStatement (große Typografie)
-
Text + BildBild rechts, Hochformat mit Badge, Check-Liste
-
Text + BildBild links, Querformat, Liste mit Kreis-Häkchen
-
Hinweisbox „Gut zu wissen“Sanft getönt
-
Hinweisbox „Gut zu wissen“Achtung mit Icon, Linie und Check-Liste
-
Hinweisbox „Gut zu wissen“Info (Blau) mit Icon, breit
-
Hinweisbox „Gut zu wissen“Dunkel, volle Inhaltsbreite
-
Hinweis-Banner (Inline)Info mit Zeitraum
-
Hinweis-Banner (Inline)Warnung
-
Hinweis-Banner (Inline)Positiv, schließbar
-
Listen-ZeilenIcon & Text | Check-Liste | Bild
-
Listen-ZeilenIcon & Überschrift | Text rechts, ohne Bild
-
Accordion / FAQGeteilt, Linien, mit FAQ-Schema
-
Accordion / FAQGestapelt, Karten
-
Accordion / FAQZentriert, mehrere offen
-
Tabs – RegisterkartenOben, Pills
-
Tabs – RegisterkartenSeitlich, unterstrichen
-
Tabs – RegisterkartenOben, Karten
-
Tabelle – responsivMobil als Karten
-
Tabelle – responsivMobil wischbar, Spalte hervorgehoben
-
Fallstudie – Projekt mit Vorher/NachherGroßformatige Geschichte
-
Ebenen – überlappende Bilder & KartenBilder links, Parallax
-
Ebenen – überlappende Bilder & KartenBilder rechts
-
3D-ViewerGLB frei drehen, Licht folgt dem Zeiger, Animation
-
Inhalt mit Sprungmarken (Legende)Klebendes Menü, zeigt den aktuellen Abschnitt
-
Seiten-Feedback (Wie hilfreich?)Bewertung 1–5, Nachricht erst nach Klick
-
Text + Bild – bis an den RandBildkante dockt am Browserfenster an – links oder rechts
-
FAQ mit Suche & Themen-FilterSuchfeld, Themen-Chips mit Anzahl
Kacheln & Raster
Leistungen, Bento, Kachel-Raster, Icon-Links, Filter-Kacheln, Highlight, Kennzahlen.
-
LeistungenBento-Layout
-
LeistungenKarten, 3 Spalten
-
LeistungenGroße Liste mit Hover-Bild
-
LeistungenKacheln mit Check-Liste
-
LeistungenBildkacheln, heller Verlauf
-
LeistungenBildkacheln, dunkler Verlauf, 2 Spalten
-
Bento-RasterText, Bild, Icon, Kennzahl
-
Kachel-Raster – Icon, Text & Bild3 × ⅓ Bild unten, 2 × ½ Bild seitlich
-
Kachel-Raster – Icon, Text & Bild⅔ + ⅓, Weiß, helle Icons, mit Links
-
Icon-Links – Raster3 Spalten, Kreis gefüllt, zeilenweise
-
Icon-Links – Raster4 Spalten, nur Icon, spaltenweise, Trennlinien
-
Kacheln mit FilterKategorien als Filter-Chips
-
Leistungen – gruppiertes RasterBereiche mit Linkliste
-
Sticky-Text mit Kachel-Raster2 Spalten, versetzt
-
Sticky-Text mit Kachel-RasterHälfte/Hälfte, Quadrat, nicht versetzt
-
Kacheln mit Aufklapp-EffektBild/Video im Hintergrund, max. 4 pro Zeile
-
Kennzahlen – animierte ZählerReihe mit Trennlinien
-
Kennzahlen – animierte ZählerKarten
-
Masonry-Raster mit FilterOverlay mit Titel
-
Masonry-Raster mit Filter4 Spalten, Graustufen → Farbe, ohne Filter
-
3D-Icon-KachelnDunkel, asymmetrisch, GLB-Icons pendeln
-
3D-Icon-KachelnVolle Breite, 3 je Reihe, Primärfarbe
-
Referenzen-GalerieReihen gegenläufig beim Scrollen, Großansicht
-
Kartendeck mit DetailansichtProjekte: Bild, Video, 3D, eigene Adresse
-
Kartendeck mit DetailansichtTeam: Porträt 4:5, Vita in der Detailansicht
-
Kachel-Filter mit SeitenFilter-Chips, Bildkacheln, Zurück · 1 / 2 · Weiter
-
Highlight ContentVerlauf aus dem Farbschema, farbige Kacheln
-
Highlight ContentEigener Verlauf, schmale Kacheln
Slider & Karussells
Bilder-, Beitrags-, Karten-, Team- und Download-Slider, Laufbänder.
-
Bilder – Slider (Galerie)Mit Bildunterschriften, Bleed
-
Bilder – Slider (Galerie)Quadrat, Autoplay
-
Beiträge & Themen – SliderBeiträge der Website (automatisch)
-
Beiträge & Themen – SliderEigene Karten (manuell)
-
Karten-Slider – volle BreiteLogos & Presse, Autoplay
-
Karten-Slider – volle BreiteFotos, Kontur
-
Karten-Slider – volle BreiteIcon + Überschrift, ohne Bild
-
Karten-Slider – volle BreiteNur Text, dunkle Karten
-
Ärzteteam – SliderWerdegang aufklappbar, Bleed
-
Ärzteteam – SliderMit Button zur Vita
-
Downloads – Formulare & DokumenteText links, in Box
-
Downloads – Formulare & DokumenteText oben, ohne Box
-
Laufband – EndlosText
-
Laufband – EndlosLogos, nach rechts, groß
-
Laufband – EndlosBilder
-
Inhalt + Bild SliderText blendet ein, Bilder sliden
Scroll-Effekte & Animation
Sticky-Stapel, Scrollytelling, Masken, Kinetische Typo, Zeitleisten.
-
Karten – Sticky StapelStacking Cards
-
Sticky ScrollytellingBild links, Maske von unten
-
Sticky ScrollytellingBild rechts, Kreis-Reveal, langsam
-
Horizontal-Scroll-SektionGepinnt, randlos, mobil wischbar
-
Scroll-ExpandBild wächst auf Vollbild und bleibt
-
Bild-/Video-Reveal – Masken-AnimationVon unten
-
Bild-/Video-Reveal – Masken-AnimationKreis, Fullscreen
-
Bild-/Video-Reveal – Masken-AnimationJalousie, 21:9
-
Bild-/Video-Reveal – Masken-AnimationSVG-Maske (Herz) mit Video
-
Bild-/Video-Reveal – Masken-AnimationSVG-Maske (Kreuz) mit Bild, Fläche dahinter
-
Kinetische TypografieZeilen gleiten gegenläufig
-
Kinetische TypografieEndlos-Laufband
-
Kinetische TypografieStatement füllt sich beim Scrollen
-
Kinetische TypografieStatement skaliert beim Scrollen
-
Hover-Reveal-ListeVorschau folgt dem Cursor
-
Hover-Reveal-ListeFeste Vorschau rechts
-
Hover-Reveal-ListeClip-Reveal in der Zeile
-
Zeitleiste / AblaufAbwechselnd links/rechts
-
Zeitleiste / AblaufEinseitig
-
Zeitleiste / AblaufHorizontal mit Klick
-
Scroll-Video mit TextboxenZeitachse folgt dem Scrollen
-
Video – volle Breite (Loop)21:9, abgerundet, Autoplay stumm
-
Video – volle Breite (Loop)16:9, randlos
-
Vorher / Nachher – VergleichsreglerHorizontal
-
Vorher / Nachher – VergleichsreglerVertikal, 4:3
Praxis, Team & Kontakt
Ärzteteam, Kontakt-Varianten, Standortkarte, Stellen, Blog-Filter.
-
Ärzteteam – RasterVersetzte Spalten, Werdegang aufklappbar
-
Ärzteteam – Raster4 Spalten, Button zur Vita
-
Kontakt, Sprechzeiten & AnfahrtKacheln + 2-Klick-Karte
-
Kontakt, Sprechzeiten & AnfahrtAnfahrt-Band: Kontakt | ÖPNV/Auto | Karte
-
Kontakt, Sprechzeiten & AnfahrtFormular rechts, Überschrift & Text links
-
Kontakt, Sprechzeiten & AnfahrtBild rechts, Kacheln umsortiert
-
Standorte – DeutschlandkarteZoom auf BW & Bayern
-
Standorte – DeutschlandkarteGanz Deutschland, Karte links
-
StellenangeboteListe mit Filter
-
Blog-FilterKategorien & Suche
Navigation & Footer
Fünf Menü-Varianten (inkl. Glas-Menü) und drei Footer-Layouts – live in den Demos.
-
Header – Menü-VariantenWo welche Variante zu sehen ist
-
FooterGroß – Kontakt-Headline, Spalten, Wortmarke (Theme-Website)
-
FooterMehrspaltig – Praxis | Zeiten | Menü (Hausarztpraxis)
-
FooterKompakt – schlanke Leiste (Orthopädie)
-
Schnellkontakt-Leiste (fixiert)Rechts angedockt, auf dem Handy Dock unten mittig
Demos
Komponenten im Einsatz sehen.
Drei komplette Demos – zwei Praxen und ein Unternehmen – zeigen, wie die Bausteine zusammenspielen.
oder rufen Sie uns an: 0711 555 210 0