Braun Styleguide

Colors

Charcoal #2e2e2d
White #ffffff
Grey-Dark #a9b1b5
Grey-Light #f8f8f8
Red #9c0a0a
Yellow #afa525
Green #0c6640

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

Form Elements

Please enter a valid email address (Ex: johndoe@domain.com).

Radio Buttons

This is a required field.

Checkbox

Checkbox - required

Checkbox - required - note

This is a required field.

Special Select

Products Grid

Address

Max Mustermann
Mustermannstr. 1
11111 Musterstadt
Deutschland

Icons

  • arrow-up-xsmall

  • arrow-right-xsmall

  • arrow-down-xsmall

  • arrow-left-xsmall

  • burger-medium

  • cart-large

  • check-small

  • close-small

  • close-xsmall

  • close-large

  • error-small

  • error-medium

  • info-medium

  • minus-large

  • minus-small

  • minus-xsmall

  • plus-large

  • plus-small

  • plus-xsmall

  • ruler-xlarge

  • search-large

  • search-medium

  • search-small

  • wishlist-large

  • world-large

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

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