Suchen
Filialsuche
Mein Konto
My Loved items
- 1) Typography
- 1.1) General typography
- 1.2) Promo typography
- 2) Icons
- 2.2) CSS only
- 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) HTML Elements
- 3.2) Interactive elements
- 3.3) Specific layout
- 3.4) Columned layout
- 3.5) Textarea over images
- 3.6) Triptych variations
- 4) Animations
- 4.1) One way animations
- 4.2) Repeating animations
- 5) Videos
- 5.1) Vimeo
- 5.2) Background
- 5.3) Shoppable
- 6) Templates
- 6.1) Category pages
- 7) Includes
- 7.1) Brand carousel
- 7.2) Promotion variations
1) Typography
1.1) General typography
Heading 1 - 2e
Heading 2 - 2e
Heading 3 - 2e
Heading 4 - 2e
Heading 5 - 2e
Heading 6 - 2e
Heading 1 (book) - 2e
Heading 2 (book) - 2e
Heading 3 (book) - 2e
Heading 4 (book) - 2e
Heading 5 (book) - 2e
Heading 6 (book) - 2e
Heading 1 (bold) - 2e
Heading 2 (bold) - 2e
Heading 3 (bold) - 2e
Heading 4 (bold) - 2e
Heading 5 (bold) - 2e
Heading 6 (bold) - 2e
Heading 1 (extra bold) - 2e
Heading 2 (extra bold) - 2e
Heading 3 (extra bold) - 2e
Heading 4 (extra bold) - 2e
Heading 5 (extra bold) - 2e
Heading 6 (extra bold) - 2e
Heading 1 (condensed) - 2e
Heading 2 (condensed) - 2e
Heading 3 (condensed) - 2e
Heading 4 (condensed) - 2e
Heading 5 (condensed) - 2e
Heading 6 (condensed) - 2e
Heading 1 (bold condensed) - 2e
Heading 2 (bold condensed) - 2e
Heading 3 (bold condensed) - 2e
Heading 4 (bold condensed) - 2e
Heading 5 (bold condensed) - 2e
Heading 6 (bold condensed) - 2e
Letterspacing 40
Letterspacing 40
Letterspacing 40
Letterspacing 40
Letterspacing 40
Letterspacing 40
Letterspacing 70
Letterspacing 70
Letterspacing 70
Letterspacing 70
Letterspacing 70
Letterspacing 70
Letterspacing 100
Letterspacing 100
Letterspacing 100
Letterspacing 100
Letterspacing 100
Letterspacing 100
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.
Text styling
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.
Ordered list
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 luctus ligula id
- Quis scelerisque mi congue
- Morbi vehicula neque orci
- Non ultricies arcu ullamcorper
- Aliquam erat volutpat.
Unordered list
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 luctus ligula id
- Quis scelerisque mi congue
- Morbi vehicula neque orci
- Non ultricies arcu ullamcorper
- Aliquam erat volutpat.
1.2) Promo typography
T.B.D.
2) Icons
2.1) CSS only
Scroll icon
2.3) Events
2.4) Social media
2.5) USPs
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) HTML elements
3.1) Bannerrows/bannerbars
3.1.1) Single CTA
3.1.2) Multiple CTAs
3.1.3) Multiple CTAs + countdown
3.1.4) Multiple bannerbars combined (normal margin)
3.1.5) Multiple bannerbars combined (narrow margin)
3.2) Interactive elements
3.2.1) Carousel
3.2.3) Carousel with three columns (desktop) and two columns (mobile)
3.2.4) Carousel with external arrows (outside carousel)
3.2.5) Product range slider (note: turned off for loading purposes)
3.2.6) Carousel with remote navigation
3.2.7) Read more section (functionality)
Additional options:
- closed height 100px
- closed height 150px
- closed height 200px
- closed height 250px
Suspendisse lacinia finibus
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.
Maximus placerat ut
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.
Suspendisse lacinia finibus
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.
Maximus placerat ut
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.
Suspendisse lacinia finibus
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.
Maximus placerat ut
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.
Suspendisse lacinia finibus
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.
Maximus placerat ut
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.2.8) Rich hotspots (functionality)
Additional options:
- Positioning by X and Y coordinates
- Make hotspot black and white by setting inverse on false.
- Make hotspot white and black by setting inverse on true.
- Make hotspot 'featured' by setting featured on true.
- Disable product thumbnail by setting 'thumbnail' on false.
3.2.09) Wish hotspots (functionality)
Additional options:
- Positioning by X and Y coordinates
- Make hotspot icon black by setting inverse on false.
- Make hotspot icon white by setting inverse on true.
3.2.10) Product carousel (based on product ids)
Additional options:
- Define number of columns on either desktop and mobile
- Define images (first and one on hover) on product level
3.2.11) Product carousel (based on category id)
Additional options:
- Define number of columns on either desktop and mobile
- Define images (first and one on hover) on product level
- Define products based on category id
- There is a max set of 16 products that will be collected
3.2.12) Product collage (based on category id)
Additional options:
- Define predefined theme based on class and properties (example: variationA)
- Define products based on category Id (example: 1104)
- Define maximum number of products
- There is a max set of 16 products that will be collected
- Define first and second (hover on desktop) product image
- Refine result (example: refine on 'c_refinementColor=Wit')
- Sort result (example: sort by new collection)
3.2.13) Parallax content
Additional options:
- Define speed of moving element
- Define direction of moving element (up, down, left, right)
- Define maximum distance of moving element
3.2.14) Chained carousels
Additional options:
- Define id of grouped carousels (mandatory)
- Define time between transitions (default is 1,5 seconds, noted as 1500)
header 4
Paragraph
header 4
Paragraph
header 4
Paragraph
header 4
Paragraph
3.3) Specific layout
3.3.1) Top banner (main page)
3.3.2) Search Hero (general)
3.3.3) Search Hero (general + inspiration)
3.3.4) Search Hero (outlet/sale)
3.3.5) Search Hero (promotion) + subnavigation on desktop
3.4) Columned layout
Possible variations:
- Two columns
- Three columns
- Four columns
Additional options:
- narrow = narrow margins (10px), default margin is 30px
- zero = no margins (0px), default margin is 30px
- data-maintain-direction = have similar grid on mobile instead of rows only
- ellipse = display images as ellipse
3.4.1) Two columns
3.4.2) Two columns (narrow)
3.4.3) Two columns (zero)
3.4.4) Two columns (ellipse)
3.4.5) Three columns
3.4.6) Three columns (narrow)
3.4.7) Three columns on desktop to two columns on mobile (narrow, maintain direction) + whitespace (inclose)
3.4.8) Three columns (zero)
3.4.9) Three columns on desktop to two columns on mobile (ellipse, maintain direction)
3.4.10) Three columns (ellipse, maintain direction) + whitespace (inclose)
3.4.11) Four columns (maintain direction)
3.4.12) Four columns (maintain direction) + whitespace (inclose)
3.5) Textarea over images
Possible variations:
- VariationA = text column on the left.
- VariationB = text column on the right.
- VariationC = text column on the bottom.
- VariationD = text column on the top.
- VariationAC = combination of A (desktop) and C (mobile)
- VariationBC = combination of B (desktop) and C (mobile)
- VariationF = text column in the center.
Additional options:
- col-2-3 = text column 2/3 wide.
- col-1-2 = text column 1/2 wide.
- col-1-3 = text column 1/3 wide.
3.5.1) Variation A: Text column (1/2) on the left
3.5.2) Variation A: Text column (1/3) on the left
3.5.3) Variation A: Text column (2/3) on the left
3.5.4) Variation B: Text column (1/2) on the right
3.5.5) Variation B: Text column (1/3) on the right
3.5.6) Variation B: Text column (2/3) on the right
3.5.7) Variation C: Text column on the bottom
3.5.8) Variation D: Text column on the top
3.5.9) Variation AC: Combination of A (desktop), text column (1/2) on the left and C (mobile), text column on the bottom
3.5.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
3.5.11) Variation F: Text column (1/2) in the center
3.5.12) Variation F: Text column (1/3) in the center
3.5.13) Variation F: Text column (2/3) in the center
WE Box
Kun je wel wat hulp gebruiken bij het samenstellen van de perfecte outfit? Ontdek onze personal shopping service!
3.6) Triptych variations
Possible variations:
- VariationA = text in the top left corner
- VariationB = text in the bottom left corner
- VariationC = text in the top right corner
- VariationD = text in the bottom right corner
- VariationE = text in the left column
- VariationF = text in the right column
- VariationG = images only. Biggest image on the left.
- VariationH = images only. Biggest image on the right.
- VariationI = extra margins. text in the bottom right corner
- VariationJ = extra margins. text in the bottom left corner
Additional options:
- narrow margin
- wrapped = wrapped triptych with padding
- data-maintain-direction = have similar grid on mobile instead of rows only (only available for variation A, B, C and D)
3.6.1) Variation A: text in top left corner
Triptych A
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.2) Variation B: text in bottom left corner + images in carousels
Triptych B
Additional option(s):
- carousels instead of images. Video's possible as well.
3.6.3) Variation C: text in top right corner
3.6.4) Variation D: text in bottom right corner
3.6.5) Variation E: text in right column
Triptych E
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.6) Variation F: text in left column
Triptych E
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.7) Variation G: images only, biggest image in left column
3.6.8) Variation H: images only, biggest image in right column
3.6.9) Variation I: extra margins. text in the bottom right corner
Triptych I
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.10) Variation J: extra margins. text in the bottom left corner
Triptych J
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.7) Listing banner
Gemaakt van
duurzaam materiaalAltijd een
stijlvolle keuze365 dagen
retourgarantie
4) Animations
4.1) One-way animations
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
upDown
downUp
leftRight
rightLeft
fadeInOut
pulse
pulseSlow
pulseShrink
pulseGrow
pulseGrowShrink
floating
tossing
tossingIntense
loopLeftways
loopRightways
5) Video
5.1) Vimeo
Usage:
- Implement video which need to be controlled
- Does not autoplay on page load
- Does not pause when it is not in view
- Can be implemented exactly the same as image layers (size) - BUT it needs to be the top layer to be controlled. Added text layers are not possible.
- Does not need to be a infinite loop video
- Separate files for different mobile/desktop dimensions possible
- Video is uploaded in Vimeo
5.2) Background
Usage:
- Set video as a background without sound and controls
- Autoplays on page load
- Pauses when it is not in view
- Can be implemented exactly the same as image layers (size, text or hotspots on top). These layers can be timed in relation to the video as well.
- Should be a infinite loop video
- Separate files for different mobile/desktop dimensions possible
- Video is uploaded in Vimeo
5.3) Shoppable
Usage:
- Implement video which either need to be controlled or as a background
- Can autoplay on page load
- Pauses when you hover a product on desktop
- Can be implemented exactly the same as image layers (size, text or hotspots on top) - BUT it needs to be the top layer if need to be controlled. Added text layers are possible when it is a background video, these layers can be timed in relation to the video as well.
- Does not need to be a infinite loop video
- Separate files for different mobile/desktop dimensions possible
- Video is uploaded in Vimeo
- Insert products in separate layer
- Set start and end time when product should appear
- Stock check included
6) Templates
6.1) Category pages
Carousels
7) Includes
7.1) Brand carousel
Brand carousel (5 columns on desktop, 1 column on mobile)
Usage:
- For homepage and 1600px width pages
Brand carousel (3 columns on desktop, 1 column on mobile)
Usage:
- For main pages and 1310px width pages
7.2) Promotion variations
Homepage
Variations:
- A/B
- C/D
- E
Main page
Variations:
- A/B
- C/D
- E