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).
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
    Exclusive
    CLERGERIE
    Caren Mules aus Metallic-Leder
    375 €
  2. Selected
    Pre-Fall
    CLERGERIE
    Caren Mules aus Metallic-Leder
    375 €
  3. Pre-Spring
    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

  • 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

  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
    Braun Hamburg Gutschein
    ab 50 €
    Sizes:
    • 50 €
    • 100 €
    • 250 €
    • 500 €

Versandmail: Gift Card Tile - Dummy

–20% extra auf alles im
Sale

Der Extra-Rabatt gilt für alle Artikel im Sale. Sie benötigen keinen Code, der Rabatt auf den Sale-Preis wird automatisch im Warenkorb abgezogen.

Der Extra-Rabatt gilt für alle Artikel im Sale. Sie benötigen keinen Code, der Rabatt auf den Sale-Preis wird automatisch im Warenkorb abgezogen.

JETZT SALE SHOPPEN
Sale on Sale

Der Extra-Rabatt gilt für alle VON BRAUN Artikel der aktuellen Kollektion, die bereits auf bis zu –50% reduziert sind. Sie benötigen keinen Code, der Rabatt auf den Sale-Preis wird automatisch im Warenkorb abgezogen.

Der Extra-Rabatt gilt für alle VON BRAUN Artikel der aktuellen Kollektion, die bereits auf bis zu –50% reduziert sind. Sie benötigen keinen Code, der Rabatt auf den Sale-Preis wird automatisch im Warenkorb abgezogen.

Jacob Cohen X Histores

Deutschlandweit nur bei BRAUN Hamburg: Die exklusive Capsule Collection vom Denim-Label Jacob Cohen und dem italienischen Top-Store-Verband Histores.

Deutschlandweit nur bei BRAUN Hamburg: Die exklusive Capsule Collection vom Denim-Label Jacob Cohen und dem italienischen Top-Store-Verband Histores.

Zu den Styles
Zeitlose Must-haves: BRAUN Hamburg Essentials

Die vielseitigen Hemden und Strickwaren aus unserer Linie BRAUN Hamburg Essentials funktionieren als Grundlage zeitloser Kombinationen: Wir lassen die Styles eigens in Italien fertigen, damit sie jeden Anspruch an luxuriöse Materialien und hohen Tragekomfort erfüllen.

Die vielseitigen Hemden und Strickwaren aus unserer Linie BRAUN Hamburg Essentials funktionieren als Grundlage zeitloser Kombinationen: Wir lassen die Styles eigens in Italien fertigen, damit sie jeden Anspruch an luxuriöse Materialien und hohen Tragekomfort erfüllen.

Jetzt entdecken
Maison Kitsuné x Chimi

Die limitierte F/S 23 Kooperation: Das Brillenlabel CHIMI aus Stockholm und die französisch-japanische Brand MAISON KITSUNÉ fusionieren ihre ikonischen Stilcodes zu zeitgemäßen Sonnenbrillen.

Die limitierte F/S 23 Kooperation: Das Brillenlabel CHIMI aus Stockholm und die französisch-japanische Brand MAISON KITSUNÉ fusionieren ihre ikonischen Stilcodes zu zeitgemäßen Sonnenbrillen.

Zur Kollektion
Original Classic von Car Shoe

Für den Extra-Grip: Mit seiner charakteristischen Noppensohle aus Gummi hat der Mokassin seinen Ursprung im Motorsport. Das klassische Driving-Shoe-Modell funktioniert allerdings zu fast jedem Anlass und ist damit ein echter Allrounder.

Für den Extra-Grip: Mit seiner charakteristischen Noppensohle aus Gummi hat der Mokassin seinen Ursprung im Motorsport. Das klassische Driving-Shoe-Modell funktioniert allerdings zu fast jedem Anlass und ist damit ein echter Allrounder.

Jetzt entdecken