Walder Component Guide
Optimale Bildgrößen
Um die Bildaufbereitung möglichst schmal zu halten, werden im Wesentlichen nur drei Bildformate verwendet:
- Hero Format (2560x1250px)
- Portrait Format (1480x1900px)
- Landscape Format (1480x1180px)
Produktbilder
Das Hero Format wird für folgende Elemente verwendet:
- Hero Slider
- Hero Banner
Das Portrait Format wird für folgende Elemente verwendet:
- Teaser Duo (Portrait Style)
- Teaser Karten Slider (Dynamisch aus Seitenbild)
- Teaser Karten Inline (Dynamisch aus Seitenbild)
- Mobile Navigation Teaser (Dynamisch aus Seitenbild)
Das Landscape Format wird für folgende Elemente verwendet:
- Teaser Duo (Landscape Style)
- Blog Karten Slider (Dynamisch aus Seitenbild)
- Blog Karten Inline (Dynamisch aus Seitenbild)
- Inline Teaser innerhalb eines Produktlistings
Sektionsbreiten
Volle Breite
Standard
Midsize
Small
Hero Banner
Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Hero Slider
Teaser Duo
Produktslider
Zitat
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Video Vimeo
Instagram Feed
Teaser Karten Slider (6 Items)
Teaser Karten Slider (4 Items)
Teaser Karten Inline
Blog Karten Slider
Blog Karten Inline
Zentriertes Bild (Skaliert anhand Bildschirmbreite)
Bildslider
Bitte nur in "Small"-Sektionen und mit einheitlich formatigen Bildern verwenden
Text/Bild Kombinationen
Bild/Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Text/Bild
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
