3.1.1) Single or multiple CTAs
Example 1
Example 2
Example 3
Example 4
Example 5
Example 6
Example 7
Example 8
1.1) General typography
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Sed laoreet magna quis diam sollicitudin, non malesuada ante porttitor. Aenean rutrum ex sed venenatis interdum. Vivamus pharetra nisi in dictum elementum. Pellentesque sed dictum mi, sed malesuada tellus. Curabitur porta facilisis lectus, interdum maximus sem dignissim ut. Phasellus vel ultrices massa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet, nunc et accumsan cursus, neque eros sodales lectus, in fermentum libero dui eu lacus. Nam lobortis facilisis sapien non aliquet. Aenean ligula urna, vehicula placerat sodales vel, tempor et orci. Donec molestie metus a sagittis condimentum. Duis vulputate lectus massa, vel viverra sem interdum sit amet. In pulvinar arcu id nisi eleifend, in placerat velit tempor. Sed volutpat orci nec velit cursus posuere. Nulla congue mi sed enim venenatis, eu suscipit neque dictum. Integer nec eros nibh.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet.
Lorem ipsum dolor sit amet, id est mutat debet volutpat, ex cum congue fabulas perfecto. Eu pro numquam convenire, facilisi reprimique mea eu. Cetero invenire voluptatum usu ne, aeterno pericula pro an, alienum erroribus ne vix. Quo ea aliquando expetendis constituam.
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
1.2) Promo typography
T.B.D.
2.1) CSS only
Scroll icon
2.2) Navigation
2.3) Events
2.4) Social media
2.5) USPs
2.6) Product related
2.7) Account
2.8) WE is ME
2.9) Contact
2.10) FAQ
2.11) WE Care
2.12) Payment, delivery & certification
2.13) Laundry labels
2.14) Flags
3.1) Bannerrows/bannerbars
3.1.1) Single or multiple CTAs
Example 1
Example 2
Example 3
20% korting op de nieuwe collectie
Example 4
20% korting op de nieuwe collectie
Example 5
20% korting op de nieuwe collectie
Example 6
Example 7
Example 8
3.1.2) With countdown
Example 1
Example 2
Example 3
3.2) Specific layout
3.2.1) Top banner (main page)
Example
3.2.2) Search Hero (general)
Example
3.2.3) Search Hero (general + inspiration)
Example
3.2.4) Search Hero (outlet/sale)
Example
3.2.5) Search Hero (promotion) + subnavigation on desktop
Example
3.3) Columned layout
Possible variations:
Additional options:
3.3.1) Two columns
Example
3.3.2) Two columns (narrow)
Example
3.3.3) Two columns (zero)
Example
3.3.4) Two columns (ellipse)
Example
3.3.5) Three columns
Example
3.3.6) Three columns (narrow)
Example
3.3.7) Three columns on desktop to two columns on mobile (narrow, maintain direction) + whitespace (inclose)
Example
3.3.8) Three columns (zero)
Example
3.3.9) Three columns on desktop to two columns on mobile (ellipse, maintain direction)
Example
3.3.10) Three columns (ellipse, maintain direction) + whitespace (inclose)
Example
3.3.11) Four columns (maintain direction)
Example
3.3.12) Four columns (maintain direction) + whitespace (inclose)
Example
3.4) Textarea over images
Possible variations:
Additional options:
3.4.1) Variation A: Text column (1/2) on the left
Example
3.4.2) Variation A: Text column (1/3) on the left
Example
3.4.3) Variation A: Text column (2/3) on the left
Example
3.4.4) Variation B: Text column (1/2) on the right
Example
3.4.5) Variation B: Text column (1/3) on the right
Example
3.4.6) Variation B: Text column (2/3) on the right
Example
3.4.7) Variation C: Text column on the bottom
Example
3.4.8) Variation D: Text column on the top
Example
3.4.9) Variation AC: Combination of A (desktop), text column (1/2) on the left and C (mobile), text column on the bottom
Example
3.4.10) Variation BC: Combination of B (desktop), text column (1/2) on the left and C (mobile), text column on the bottom. Both in a carousel
Example
3.4.11) Variation F: Text column (1/2) in the center
Example
3.4.12) Variation F: Text column (1/3) in the center
Example
3.4.13) Variation F: Text column (2/3) in the center
Example
Kun je wel wat hulp gebruiken bij het samenstellen van de perfecte outfit? Ontdek onze personal shopping service!
3.5) Triptych variations
Possible variations:
Additional options:
3.5.1) Variation A: text in top left corner
Example
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.5.2) Variation B: text in bottom left corner + images in carousels
Example
3.5.3) Variation C: text in top right corner
Example
3.5.4) Variation D: text in bottom right corner
Example
3.5.5) Variation E: text in right column
Example
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.5.6) Variation F: text in left column
Example
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.5.7) Variation G: images only, biggest image in left column
Example
3.5.8) Variation H: images only, biggest image in right column
Example
3.5.9) Variation I: extra margins. text in the bottom right corner
Example
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.5.10) Variation J: extra margins. text in the bottom left corner
Example
Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.6) Listing banner
3.6.1) Fundamentals USPs
Example
Gemaakt van
duurzaam materiaal
Altijd een
stijlvolle keuze
365 dagen
retourgarantie
3.7) Interactive elements
3.7.1) Default carousel
Example
3.7.2) Carousel with two columns visible
Example
3.7.3) Carousel with external arrows (outside carousel)
Example
3.7.4) Product range slider (note: to be fixed)
Example
3.7.5) Carousel with remote navigation
Example
Heb je een uitnodiging voor een bruiloft ontvangen? Tenzij er een specifieke dresscode is, kun je bij bruiloften experimenteren met je outfit. Draag je een pak? Wees dan creatief met kleuren en prints. Voeg altijd een feestelijke twist toe!
Heb je een uitnodiging voor een bruiloft ontvangen? Tenzij er een specifieke dresscode is, kun je bij bruiloften experimenteren met je outfit. Draag je een pak? Wees dan creatief met kleuren en prints. Voeg altijd een feestelijke twist toe!
Een pak dragen naar kantoor? Dat hoeft niet altijd heel formeel te zijn! Wissel je nette overhemden eens af met een moderner exemplaar en ruil je nette schoenen in voor een paar sneakers.
Een pak dragen naar kantoor? Dat hoeft niet altijd heel formeel te zijn! Wissel je nette overhemden eens af met een moderner exemplaar en ruil je nette schoenen in voor een paar sneakers.
Laat met je outfit tijdens een sollicitatiegesprek zien dat je er werk van hebt gemaakt. Een pak is niet altijd een must, maar je moet ook niet te informeel gekleed gaan. Met een nette (spijker)broek, overhemd en nette schoenen zit je goed.
Laat met je outfit tijdens een sollicitatiegesprek zien dat je er werk van hebt gemaakt. Een pak is niet altijd een must, maar je moet ook niet te informeel gekleed gaan. Met een nette (spijker)broek, overhemd en nette schoenen zit je goed.
3.7.6) Read more section (functionality)
Additional options:
Example 1
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet.
Lorem ipsum dolor sit amet, id est mutat debet volutpat, ex cum congue fabulas perfecto. Eu pro numquam convenire, facilisi reprimique mea eu. Cetero invenire voluptatum usu ne, aeterno pericula pro an, alienum erroribus ne vix. Quo ea aliquando expetendis constituam.
Pellentesque eget metus et velit in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
Example 2
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet.
Lorem ipsum dolor sit amet, id est mutat debet volutpat, ex cum congue fabulas perfecto. Eu pro numquam convenire, facilisi reprimique mea eu. Cetero invenire voluptatum usu ne, aeterno pericula pro an, alienum erroribus ne vix. Quo ea aliquando expetendis constituam.
Pellentesque eget metus et velit in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
Example 3
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet.
Lorem ipsum dolor sit amet, id est mutat debet volutpat, ex cum congue fabulas perfecto. Eu pro numquam convenire, facilisi reprimique mea eu. Cetero invenire voluptatum usu ne, aeterno pericula pro an, alienum erroribus ne vix. Quo ea aliquando expetendis constituam.
Pellentesque eget metus et velit in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
Example 4
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam.
Nulla vel euismod eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia finibus ipsum vitae tempus. Nam vestibulum pretium leo a facilisis. Ut id tincidunt neque. Morbi sit amet varius velit. Pellentesque eget metus et velit maximus placerat ut in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet.
Lorem ipsum dolor sit amet, id est mutat debet volutpat, ex cum congue fabulas perfecto. Eu pro numquam convenire, facilisi reprimique mea eu. Cetero invenire voluptatum usu ne, aeterno pericula pro an, alienum erroribus ne vix. Quo ea aliquando expetendis constituam.
Pellentesque eget metus et velit in quam. Pellentesque luctus ligula id ipsum gravida, quis scelerisque mi congue. Morbi vehicula neque ex, non ultricies arcu ullamcorper sit amet. Morbi rutrum sem non tortor eleifend, quis scelerisque nulla cursus. Aliquam erat volutpat.
3.7.7) Rich hotspots (functionality)
Additional options:
Example
3.7.8) Product carousel (based on product ids)
Additional options:
Example
3.7.9) Product carousel (based on category id)
Additional options:
Example 1
Example 2
3.7.10) Product collage (based on category id)
Additional options:
Example
3.7.11) Parallax content (note: to be fixed)
Additional options:
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies fermentum neque maximus sollicitudin. Nam vestibulum mollis nibh, in consectetur justo aliquam a. Nam interdum at elit non rhoncus. Donec id nulla mi. Ut bibendum, elit quis gravida vehicula, lectus neque tempor nunc, et mattis tellus ante vel orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies fermentum neque maximus sollicitudin. Nam vestibulum mollis nibh, in consectetur justo aliquam a. Nam interdum at elit non rhoncus. Donec id nulla mi. Ut bibendum, elit quis gravida vehicula, lectus neque tempor nunc, et mattis tellus ante vel orci.
3.7.12) Tabbed carousels
Additional options:
Example
4.1) One-way animations
Examples
fadeIn
fadeOut
dropIn
dropOut
leftToRightIn
slowLeftToRightIn
leftToRightOut
slowLeftToRightOut
rightToLeftIn
slowRightToLeftIn
rightToLeftOut
slowRightToLeftOut
topToBottomIn
topToBottomOut
bottomToTopIn
bottomToTopOut
fadeLeftToRightIn
fadeLeftToRightOut
fadeRightToLeftIn
fadeRightToLeftOut
fadeTopToBottomIn
fadeTopToBottomOut
fadeBottomToTopIn
fadeBottomToTopOut
fadeInUpward
fadeOutUpward
fadeInLeftways
fadeOutLeftways
fadeInRightways
fadeOutRightways
fadeInDownward
fadeOutDownward
slideDown
slideUp
slideLeft
slideRight
expandUp
expandDown
expandOpen
bigEntrance
hatch
bounce
bounceIn
pullUp
pullDown
stretchLeft
stretchRight
stretchUp
stretchDown
4.2) Repeating animations
Examples
upDown
downUp
leftRight
rightLeft
fadeInOut
pulse
pulseSlow
pulseShrink
pulseGrow
pulseGrowShrink
floating
tossing
tossingIntense
loopLeftways
loopRightways
5.1) Vimeo
5.1.1) Default video
Properties:
Example
5.1.2) Background video
Properties:
Example
5.2) Shoppable
5.2.1) Video with shoppable product pods
Properties:
Example
5.2.2) Video with shoppable hotspots
Properties:
Example
6.1) Carousels
6.1.1) Textlayer on images
Example
6.1.2) Text below images
Example
7.1) Brand carousel
7.1.1) Homepage
Example
Page does not contain any content.7.1.2) Main page
Example
Page does not contain any content.7.2) Promotion variations
7.2.1) Homepage
Variations:
7.2.2) Main page
Variations: