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.

  1. Pellentesque luctus ligula id
  2. Quis scelerisque mi congue
  3. Morbi vehicula neque orci
  4. Non ultricies arcu ullamcorper
  5. 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.2) Navigation

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

Wear
The moment

bruiloft | werkdag | sollicitatiegesprek

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!

Shop Now

Wear The moment

bruiloft | werkdag | sollicitatie

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!

Shop Now

Wear
The moment

bruiloft | werkdag | sollicitatiegesprek

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.

Shop Now

Wear The moment

bruiloft | werkdag | sollicitatie

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.

Shop Now

Wear
The moment

bruiloft | werkdag | sollicitatiegesprek

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.

Shop Now

Wear The moment

bruiloft | werkdag | sollicitatie

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.

Shop Now

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

Aliquam vitae pretium lorem vel blandit purus leo in egestas vestibulum

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.

Aliquam vitae pretium lorem vel blandit purus leo in egestas vestibulum

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.2.14) Chained carousels

Additional options:

  • Define id of grouped carousels (mandatory)
  • Define time between transitions (default is 1,5 seconds, noted as 1500)

Slide 1

Slide 2

header 4

Paragraph

Slide 1

Slide 2

header 4

Paragraph

Slide 1

Slide 2

header 4

Paragraph

Slide 1

Slide 2

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)

Un libro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc arcu, pretium ut urna ut, iaculis vehicula nisi.

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

Variation A (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.2) Variation A: Text column (1/3) on the left

Variation A (1/3)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.3) Variation A: Text column (2/3) on the left

Variation A (2/3)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.4) Variation B: Text column (1/2) on the right

Variation B (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.5) Variation B: Text column (1/3) on the right

Variation B (1/3)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.6) Variation B: Text column (2/3) on the right

Variation B (2/3)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.7) Variation C: Text column on the bottom

Variation C

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.8) Variation D: Text column on the top

Variation D

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.9) Variation AC: Combination of A (desktop), text column (1/2) on the left and C (mobile), text column on the bottom

Variation AC (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

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

Variation BC (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

Variation BC (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.11) Variation F: Text column (1/2) in the center

Variation F (1/2)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

3.5.12) Variation F: Text column (1/3) in the center

Variation F (1/3)

Sed nisi mi, blandit feugiat lorem a, consequat vehicula massa. In ut porttitor augue. Etiam pellentesque non dolor ac placerat.

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!

Meer informatie Bestel een WE Box

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

Triptych C

Additional option(s):

  • wrapped
  • clickable images

3.6.4) Variation D: text in bottom right corner

Triptych D

Additional option(s):

  • wrapped
  • clickable images

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 materiaal

  • Altijd een
    stijlvolle keuze

  • 365 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

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

Lorem ipsum

Shop Now

7) Includes

Brand carousel (5 columns on desktop, 1 column on mobile)

Usage:

  • For homepage and 1600px width pages
Diese Seite ist leer.

Brand carousel (3 columns on desktop, 1 column on mobile)

Usage:

  • For main pages and 1310px width pages
Diese Seite ist leer.

7.2) Promotion variations

Homepage

Variations:

  • A/B
  • C/D
  • E

Main page

Variations:

  • A/B
  • C/D
  • E