Design System
Playground Zur Vorlage

Sektionen · ContentGalerie-Sektion

Sektion · 6 Varianten

Galerie-Sektion

sections/GalerieSektion.astro

Galerie mit Intro: Raster, Mauer, Filter-Chips, Lightbox je Bild, Bento, randloses Band.

Notizen

  • Galerie (Sektion) und Lightbox (Komponente) aus dem Bestand. Sektion setzt Intro und Filter davor.
  • Galerie hat bare-Prop (kein Fond, kein Padding oben).

Props

Name Typ Default Notiz
variant "intro-raster" | "intro-mauer" | "filter" | "lightbox" | "bento" | "band" "intro-raster" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<GalerieSektion variant="intro-raster" surface="nacht" />

01 · Intro Raster

Label, H2, dann Raster

Galerie raster. —

Nacht

Werkstatt

Bilder vom Legen.

Paper

Werkstatt

Bilder vom Legen.

02 · Intro Mauer

columns

Galerie mauer. —

Nacht

Werkstatt

Bilder vom Legen.

Paper

Werkstatt

Bilder vom Legen.

03 · Filter

Chips über den Bildern

Filter-Leiste chips. —

Nacht

Werkstatt

Bilder vom Legen.

Paper

Werkstatt

Bilder vom Legen.

04 · Lightbox

Klick öffnet dialog

Lightbox caption. —

Nacht

Werkstatt

Bilder vom Legen.

  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.
  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.
  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.

Paper

Werkstatt

Bilder vom Legen.

  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.
  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.
  • Werkstatt
    Werkstatt, Hamburg. Foto: Nordwynd.

05 · Bento

Erstes Bild 2×2

Galerie bento. —

Nacht

Werkstatt

Bilder vom Legen.

Paper

Werkstatt

Bilder vom Legen.

06 · Band

Randlos, gap-0

Galerie voll. —

Nacht

Werkstatt

Bilder vom Legen.

Paper

Werkstatt

Bilder vom Legen.