WEBER+WEBER Styleguide

Colors

Graphit #201f23
Grey-Dark #8d8d8d
Grey-Light #e9ebe8
Grey-Soft #f6f6f6
White #ffffff
Red #b00000
Orange #f2933d
Green #008b38

Typography

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5
Headline h6

COPY TEXT Lorem ipsum dolor TEXTLINK 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 abore 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.

COPY TEXT BOLD Lorem ipsum dolor TEXTLINK 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 abore 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.

HINT Lorem ipsum dolor TEXTLINK 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 abore 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.

HINT BOLD Lorem ipsum dolor TEXTLINK 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 abore 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.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Price

77,00 €

Buttons / Links

Form Elements

Please enter a valid email address (Ex: johndoe@domain.com).
Bitte wählen...
Bitte wählen... Herr Frau Adding Many Options To Trigger Scrollbar

Radio Buttons

This is a required field.

Checkbox

Checkbox - required

Checkbox - required - note

This is a required field.

Special Select

Products Grid

  1. New
    Sale
    Pre-Fall
    CLERGERIE
    Caren Mules aus Metallic-Leder
    375 €
  2. Exclusive
    Pre-Fall
    CLERGERIE
    Caren Mules aus Metallic-Leder
    375 €
  3. New
    CLERGERIE
    Caren Mules aus Metallic-Leder
    375 €

Address

Max Mustermann
Mustermannstr. 1
11111 Musterstadt
Deutschland

Icons

  • arrow-up-xsmall

  • arrow-right-xsmall

  • arrow-down-xsmall

  • arrow-left-xsmall

  • arrow-up-small

  • arrow-right-small

  • arrow-down-small

  • arrow-left-small

  • cart-medium

  • cart-small

  • check-small

  • close-small

  • close-xsmall

  • close-large

  • error-small

  • error-medium

  • info-medium

  • leaf-medium

  • minus-large

  • minus-small

  • minus-xsmall

  • plus-large

  • plus-small

  • plus-xsmall

  • ruler-xlarge

  • search-large

  • search-medium

  • search-small

  • shipping-small

  • shipping-medium

  • wishlist-large

  • world-large

  • map-pin-large

  • amazon-pay

  • klarna

  • americanexpress

  • paypal

  • visa

  • mastercard

  • invoice-black

  • dhl

  • ups

  • eilkurier

  • instagram

  • youtube

  • facebook

Overlays

Example Overlay Content

Lorem ipsum dolor TEXTLINK 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 abore 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 textlink 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 abore 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.

Off-Canvas

Offcanvas Content

Lorem ipsum dolor TEXTLINK 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 abore 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 textlink 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 abore 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.

Product Slider

  1. CLERGERIE
    Product 1
    375 €
  2. CLERGERIE
    Product 2
    375 €
  3. CLERGERIE
    Product 3
    375 €
  4. CLERGERIE
    Product 4
    375 €
  5. CLERGERIE
    Product 5
    375 €
  6. CLERGERIE
    Product 6
    375 €
  7. CLERGERIE
    Product 7
    375 €
  8. CLERGERIE
    Product 8
    375 €
  9. CLERGERIE
    Product 9
    375 €
  10. CLERGERIE
    Product 10
    375 €
  11. CLERGERIE
    Product 11
    375 €
  12. CLERGERIE
    Product 12
    375 €

Logos

tables

xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy
xyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxyxy

bulma tables

Sphäre
Zylinder
Achse
PD
Auge links
-0.25
0
30
27
Auge rechts
0.25
-0.25
25
26.5
Sphäre
Zylinder
Achse
PD
Auge links
-0.25
0
30
27
Auge rechts
0.25
-0.25
25
26.5

bulma 12 columns

yx
yx
yx
yx
yx
yx
yx
yx
yx
yx
yx
yx

nested clolumns 10 > 12

yx
yx
yx
yx
yx
yx
yx
yx
yx
yx
yx
yx

10 columns centered

yx
yx
yx
yx
yx
yx
yx
yx
yx
yx

Top Categories nested columns

yx
yx
yx
yx

Footer

yx
yx
yx
yx
yx
yx
xx
xx
xx
xx

PL: Gift Card Tile - Dummy

  1. Cashmere Daunenjacke hellgrau
    Gutschein
    WEBER+WEBER Gutschein
    ab 50 €
    Sizes:
    • 50 €
    • 100 €
    • 250 €
    • 500 €

Versandmail: Gift Card Tile - Dummy