Galerie-Komponenten

Übersicht aller sechs Galerie-Varianten im easy-web-Ökosystem. Jede Variante wird über ein kind-Feld in den CMS-Einträgen untersrc/content/galleries/ ausgewählt und über<GallerySection /> in Seiten eingebunden.

1. Hero-Slider (hero-slider)

Großformatiger editorialer Slider mit Titel, Untertitel und optionalem CTA pro Folie. Ideal als oberster Abschnitt einer Landingpage.

Beispielbild eines Hero-Banners

Willkommen bei achim.ismaili.de

Die Pilot-Instanz des easy-web-Ökosystems

Mehr erfahren

2. Bildraster (image-grid)

Statisches N-Spalten-Raster mit gleicher Bildgröße. Geeignet für Komponenten-Vorschauen, Team-Fotos oder Sponsoren.

Komponenten-Vorschau

Hero Komponente
Hero
Card Grid
Card Grid
Theme Toggle
Theme Toggle

4. Mosaik-Raster (masonry-grid)

Pinterest-artiges Raster mit variabler Bildhöhe via CSS-Spalten. Geeignet für Fotografie und Portfolios.

Mosaik-Raster-Beispiel

Hero Komponente
Hero
Card Grid
Cards
Theme Toggle
Theme
Card Grid erneut
Cards erneut
Hero Komponente erneut
Hero erneut
Theme Toggle erneut
Theme erneut

5. Funktions-Hervorhebung (feature-highlight)

Abwechselnde Bild-und-Text-Reihen mit optionalem CTA. Geeignet für Produkt-Features oder Service-Beschreibungen.

Funktions-Hervorhebung-Beispiel

Hero Komponente

Hero — der Eyecatcher

Großformatige Einleitungs-Komponente mit Titel, Untertitel und Call-to-Action. Eignet sich als oberster Abschnitt einer Landingpage.

Mehr zum Hero
Card Grid Komponente

Card Grid — strukturierter Überblick

Responsive Karten-Raster für Features, Personen oder verlinkte Inhalte. Skaliert von einer Spalte (Mobil) bis vier Spalten (Desktop).

Beispiele im Blog
Theme Toggle Komponente

Theme Toggle — Hell/Dunkel

Ein-Klick-Wechsel zwischen hellem und dunklem Modus. Speichert die Auswahl pro Browser über CSS-Custom-Properties.