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.

Heading 1 - 2e

Heading 2 - 2e

Heading 3 - 2e

Heading 4 - 2e

Heading 5 - 2e
Heading 6 - 2e

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.

HTML building blocks

1. Design elements

1.2. Scroll icon

2. Specific banners

2.1. Top banner (main page)

2.2. Search Hero (general)

2.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.

2.4. Search Hero (outlet/sale)

2.5. Search Hero (promotion) + subnavigation on desktop

3. Columned content

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.1. Two columns

3.2. Two columns (narrow)

3.3. Two columns (zero)

3.4. Two columns (ellipse)

3.5. Three columns

3.6. Three columns (narrow)

3.7. Three columns on desktop to two columns on mobile (narrow, maintain direction) + whitespace (inclose)

3.8. Three columns (zero)

3.9. Three columns on desktop to two columns on mobile (ellipse, maintain direction)

3.10. Three columns (ellipse, maintain direction) + whitespace (inclose)

3.11. Four columns (maintain direction)

3.12. Four columns (maintain direction) + whitespace (inclose)

4. Bannerrows

4.1. General

4.2. Promotion

4.3. Promotion with countdown

4.4. Promotion with countdown on two lines

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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)

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.

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.

6.3. Variation C: text in top left corner

Triptych C

Additional option(s):

  • wrapped
  • clickable images

6.4. Variation D: text in bottom right corner

Triptych D

Additional option(s):

  • wrapped
  • clickable images

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.

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.

6.7. Variation G: images only, biggest image in left column

6.8. Variation H: images only, biggest image in right column

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.

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.