🎯 Teaser Flow Modules - Vollständige Übersicht

📊 Migration Status: teaser-flow.pug ✅ VOLLSTÄNDIG!

🔧 Helper: teaser-link

Wird inline verwendet für Teaser-Links

  
	
	  
			
		
	
	zum Artikel
  

📦 Basis-Items (8 Module)

Einzelne Teaser-Item Komponenten für Custom-Listen

1. module__teaser-item-stelle.html (Stellenanzeigen)

2. module__teaser-item-post.html (News-Posts)

3. module__teaser-item-event.html (Events)

4. module__teaser-item-generic.html (Generisch)

5. module__teaser-item-feat-image.html (Featured mit Bild)

6. module__teaser-item-feat-monad.html (Featured mit Monad)

7. module__teaser-item-fakt.html (Fakten-Box)

8. module__teaser-item-media.html (Media - Video/Bild)

✅ Spezifische Flow-Module (9 Module)

Komplette Teaser-Flows mit Container und Items

1. module__teaser-flow-posts.html

2. module__teaser-flow-events.html

3. module__teaser-flow-press.html (Medienschau)

4. module__teaser-flow-articles.html

5. module__teaser-flow-exhibitions.html (Forschungsmuseen)

6. module__teaser-flow-media.html (Mediathek)

7. module__teaser-flow-community.html (Die Gemeinschaft)

8. module__teaser-flow-generic-3up.html

9. module__teaser-flow-generic-4up.html

🔧 Technische Details

Container-Struktur (direkt im Template):

• teaser-frame - Container mit Hintergrundfarbe (.bleed .frame .py-ml .bg-{color})
• teaser-flow - Standard Container (.stack-ml)

JavaScript Dependencies:

• Flickity.js - Slider-Funktionalität für alle Flow-Module
• CSS Grid - Layout für verschiedene Teaser-Größen (cell, teaser-item-double, teaser-item-single)

Gulpfile Macros (benötigt):

• icon(name, size, inline) - Icon-Helper
• img(url, options) - Bild-Helper mit lazy loading
• vertical_monad_image() - Vertikale Monad für Featured-Teaser
• ph2(aspect, color, text) - Placeholder-Helper

CSS Klassen:

• .teaser-flow, .teaser-frame - Container
• .teaser-slider, .teaser-slider-3up, .teaser-slider-4up - Slider-Varianten
• .flickity-flow - Flickity Initialisierung
• .teaser-item - Basis-Klasse für alle Items
• .teaser-item-{type} - Spezifische Item-Types
• .cell - Grid-Cell für Slider-Items

🎯 Vergleich der Teaser-Flows