Bild oberhalb
Eine stabile Stapelkomposition hält das Bild bei jeder Containerbreite vor dem Text.
Medien nur einmal komponiert
Jedes Beispiel auf dieser Seite verwendet denselben semantischen Renderer, denselben Katalog und dieselbe responsive Auslieferungsrichtlinie. Ändern Sie die Größe, öffnen Sie die Galerie oder deaktivieren Sie JavaScript – der Inhalt bleibt vollständig.
Sieben Ergebnisse, ein gemeinsamer Baustein
Anordnung, Seitenverhältnis, Anpassung und logische Position verändern das Ergebnis, ohne getrennte Komponenten zu erzeugen.
Eingepasstes Produktbild
Die eingepasste Darstellung bewahrt die vollständige Produktsilhouette, während responsive Varianten das transparente PNG effizient ausliefern.
Bild davor
Die geteilte Komposition wird erst horizontal, wenn ihr eigener Container genügend Platz bietet.
Bild danach
Der Text bleibt in der Lesereihenfolge zuerst, während das Bild visuell und im Dokument danach folgt.
Redaktionelles Porträt
Das Porträtprofil wählt eine schmalere Bildrichtlinie und einen bewusst vertikalen Ausschnitt.
Lesbare Überlagerung
Text liegt nur über Bildern, wenn eine kontrollierte dunkle Fläche und eine lesbare Kontrastvorgabe aktiv sind.
Hervorgehobene Breite
Die hervorgehobene Karte belegt das verfügbare Raster und behält dieselben Medien- und Inhaltsbereiche.
Tell the business story with people and place
Use these layouts for an about page, a service story, a venue introduction, a case study, or a campaign feature. Content keeps meaningful source order while the framework owns balanced spacing, edges, overlap, and responsive reflow.
A real image-backed section
The photograph is discoverable in initial HTML, the scrim resolves through a known dark surface, and the content remains readable without JavaScript.
Editorial split
Media and copy share a balanced two-column composition when the section container is wide enough, then return to a single readable flow.
Full-bleed image, contained story
The image reaches the section edges while the supporting story returns to the site measure and page gutters.
Edge-to-edge split
The storefront meets the viewport edge while the copy retains comfortable, design-owned padding.
Controlled overlap
The content panel overlaps the photograph only at spacious container widths and returns to normal flow when room is limited.
Editorial offset
An asymmetrical portrait and start-aligned caption create editorial rhythm without authored grid coordinates.
Bewegung, die zurücktritt
Jede Behandlung ist optional, nutzt Compositor-Eigenschaften und ist vor jeder Erweiterung vollständig. Reduzierte Bewegung und nicht unterstützte Browser behalten denselben statischen Inhalt.
Zurückhaltendes Einblenden
Eine Ansichts-Zeitleiste blendet die gesamte Karte ein. Layout und Lesereihenfolge warten nie auf eine Animation.
Hover-gerechter Zoom
Das Bild vergrößert sich nur auf Geräten mit genauer Hover-Eingabe innerhalb seines beschnittenen Rahmens.
Hover-gerechter Zoom
Dezente Parallaxe
Nur die Medienschicht bewegt sich per CSS um wenige Prozent; der Karteninhalt bleibt ruhig.
Erst Poster, dann Wiedergabe
Derselbe stumme lokale Clip zeigt einen dekorativen Hintergrund und ein informatives natives Video, ohne die Wiedergabe in den ersten Renderpfad zu legen.
Ruhiger Ofen mit Kontrolle
Das JPEG-Poster erscheint sofort. JavaScript fügt das stumme MP4 nur bei erlaubter Bewegung ein, und eine echte Schaltfläche stoppt die Bewegung.
Native Steuerung und vollständiger Kontext
Das informative Video startet nicht automatisch. Native Steuerung, feste Abmessungen, lokalisierte Zeittexte, Poster und gleichwertiger Text bleiben verfügbar.
Das Video ist nicht verfügbar. Nutzen Sie das visuelle Transkript unten.
Visuelles Transkript
Von null bis vier Sekunden liegen Fladenbrote neben der Glut eines Holzofens. Von vier bis acht Sekunden dreht die behandschuhte Hand eines Bäckers ein rundes Brot nahe der Hitze.
Semantische Abbildung mit Katalognachweis
Wenn eine Beschriftung oder ein Nachweis zu einem Bild gehört, erzeugt der Renderer echte figure- und figcaption-Elemente. Der Nachweis stammt aus dem Medienkatalog und wird nicht im Seitentext dupliziert.
Galerien zuerst als statischer Inhalt
Jedes Element bleibt in Quellreihenfolge vorhanden. Scroll-Einrasten und native dialog-Lightbox erhöhen den Komfort, ohne Inhalte hinter JavaScript zu verstecken.
Scroll-Einrasten mit Lightbox
Wischen oder ziehen Sie durch eine Reihe, die bei jeder Breite horizontal scrollbar bleibt; auch Touchpad und Scrollleiste stehen zur Verfügung. Die deklarierte Kapazität bestimmt, wie viele Abbildungen gleichzeitig sichtbar sind. Aktivieren Sie ein Bild, um die barrierefreie Lightbox zu öffnen.
Statisches Porträtraster
Diese Galerie verzichtet vollständig auf die Lightbox. Alle Abbildungen und Beschriftungen bleiben ohne clientseitiges Verhalten verfügbar.
Mixed-size mosaic
A wide lead photograph opens into varied portraits, details, people, and process images that keep meaningful source order without exposing grid coordinates.
Für Geschwindigkeit gebaut
Die Seite zeigt neben den visuellen Ergebnissen auch die Auslieferungsrichtlinie. Lighthouse prüft das bereitgestellte Ergebnis nach jeder Umsetzung.
-
Passende Quellgrößen
Benannte Profile erzeugen begrenzte Breiten und genaue sizes-Angaben, statt überall ein übergroßes Bild auszuliefern.
-
Bewusstes Laden
Nur das erste Bild wird sofort und mit hoher Priorität geladen. Alle weiteren Bilder laden verzögert und werden asynchron dekodiert.
-
Kleine Erweiterung
Die Galerie liefert zuerst vollständiges HTML. Ein isoliertes Skript erweitert direkte Links um natives dialog, Tastatursteuerung und Fokusrückgabe.
Need the complete implementation matrix?
The technical appendix isolates every public media variant, resolved decision, fallback, and actionable invalid state from this business-oriented showcase.