Styleguide Elektroland24
Dies ist eine Übersicht aller Elemente.
Colors
Folgende Farbwerte und Klassen wurden festgelegt.
Farbwerte
#007ce5
#004871
#7fbedf
#a0001c
#000000
#f5f5f5
#eaeaea
#6A6A6A
#ffffff
Text Colors
Folgende Farbklassen stehen zur Verfügung
(Standard)
Background Colors
Folgende Hintergrundfarben stehen zur Verfügung
Headlines
Überschrift h1
Überschrift h2
Überschrift h3
Überschrift h4
Überschrift h5
Überschrift h6
Überschrift h1
mit Zeilenumbruch
Überschrift h2
mit Zeilenumbruch
Überschrift h3
mit Zeilenumbruch
Überschrift h4
mit Zeilenumbruch
Fonts
Light
Regular
Medium
Semibold
Bold
Extrabold
Je nach Hintergrund-Farbe wird die Headline-Farbe "automatisch" angepasst. Für die korrekte Headline-Farbe ist daher zwingend die entsprechende Hintergrund-Farbe Klasse (siehe oben) zu nutzen.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
1234567890
! “ § $ % & / ( ) = ? ` ; : ¡ “ ¶ ¢ [ ] | { } ≠ ¿ ‘ « € ® † Ω
̈ ⁄ ØΠ • ± ‘ Æ OE @ Δ º ª © Ƒ∂ ‚ Å ¥≈ Ç
Buttons
Je nach Hintergrund-Farbe wird der Button "automatisch" angepasst. Für die korrekte Button-Farbe ist daher zwingend die entsprechende Hintergrund-Farbe Klasse (siehe oben) zu nutzen.
Text
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit hic saepe assumenda modi dolorem fuga earum, natus, expedita velit culpa quos dolorum obcaecati ea ab odio reiciendis illo deserunt neque doloremque quibusdam sequi atque. A minus libero consequuntur doloremque fuga aut. Facilis corporis quisquam dicta numquam doloribus laboriosam nesciunt in, repellendus atque assumenda, fugiat consequuntur voluptate odit voluptatem nisi odio, dolorum eligendi alias est cupiditate. Natus nulla nemo voluptatum praesentium. Perferendis architecto a sunt! Voluptas fugit reiciendis voluptatum libero ex praesentium nesciunt cum, adipisci nemo! Distinctio sit non officia eveniet recusandae ut ipsum nemo, necessitatibus, sapiente sed temporibus. Aspernatur, quo quos perspiciatis ullam amet modi fugiat corrupti consequuntur?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit hic saepe assumenda modi dolorem fuga earum, natus, expedita velit culpa quos dolorum obcaecati ea ab odio reiciendis illo deserunt neque doloremque quibusdam sequi atque. A minus libero consequuntur doloremque fuga aut. Facilis corporis quisquam dicta numquam doloribus laboriosam nesciunt in, repellendus atque assumenda, fugiat consequuntur voluptate odit voluptatem nisi odio, dolorum eligendi alias est cupiditate. Natus nulla nemo voluptatum praesentium. Perferendis architecto a sunt! Voluptas fugit reiciendis voluptatum libero ex praesentium nesciunt cum, adipisci nemo! Distinctio sit non officia eveniet recusandae ut ipsum nemo, necessitatibus, sapiente sed temporibus. Aspernatur, quo quos perspiciatis ullam amet modie ipsam.
Text small
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit hic saepe assumenda modi dolorem fuga earum, natus, expedita velit culpa quos dolorum obcaecati ea ab odio reiciendis illo deserunt neque doloremque quibusdam sequi atque. A minus libero consequuntur doloremque fuga aut. Facilis corporis quisquam dicta numquam doloribus laboriosam nesciunt in, repellendus atque assumenda, fugiat consequuntur voluptate odit voluptatem nisi odio, dolorum eligendi alias est cupiditate. Natus nulla nemo voluptatum praesentium. Perferendis architecto a sunt! Voluptas fugit reiciendis voluptatum libero ex praesentium nesciunt cum, adipisci nemo! Distinctio sit non officia eveniet recusandae ut ipsum nemo, necessitatibus, sapiente sed temporibus. Aspernatur, quo quos perspiciatis ullam amet modi fugiat corrupti consequuntur?Text Links
btn btn-link btn-blockIcons
Size SM
accu
accu-1
battery
bulb
bulb-1
bulb-2
bulb-3
cable
cable-1
cable-1
cable-1
distributor
halogen
house
house-1
house-2
house-3
icon-11
icon-12
icon-13
icon-14
icon-15
icon-16
icon-17
icon-18
icon-19
icon-20
icon-21
icon-22
icon-23
icon-24
icon-25
icon-26
icon-27
icon-29
icon-30
icon-31
icon-32
icon-33
icon-34
icon-35
icon-37
icon-38
icon-39
icon-41
icon-42
icon-43
icon-45
icon-46
icon-48
led
lighttube
plug
plug-1
socket
socket-1
socket-2
switch
tool
vector
retoure
solar
user
board
shopping-bag
bestellungen
board
board-add
cart-incart
cart
hilfe
koffer
kontakt
Message text
Comments
Size MD / Standard
accu
accu-1
battery
bulb
bulb-1
bulb-2
bulb-3
cable
cable-1
cable-1
cable-1
distributor
halogen
house
house-1
house-2
house-3
icon-11
icon-12
icon-13
icon-14
icon-15
icon-16
icon-17
icon-18
icon-19
icon-20
icon-21
icon-22
icon-23
icon-24
icon-25
icon-26
icon-27
icon-29
icon-30
icon-31
icon-32
icon-33
icon-34
icon-35
icon-37
icon-38
icon-39
icon-41
icon-42
icon-43
icon-45
icon-46
icon-48
led
lighttube
plug
plug-1
socket
socket-1
socket-2
switch
tool
vector
retoure
solar
user
board
shopping-bag
bestellungen
board
board-add
cart-incart
cart
hilfe
koffer
kontakt
Message text
Comments
Size LG
accu
accu-1
battery
bulb
bulb-1
bulb-2
bulb-3
cable
cable-1
cable-1
cable-1
distributor
halogen
house
house-1
house-2
house-3
icon-11
icon-12
icon-13
icon-14
icon-15
icon-16
icon-17
icon-18
icon-19
icon-20
icon-21
icon-22
icon-23
icon-24
icon-25
icon-26
icon-27
icon-29
icon-30
icon-31
icon-32
icon-33
icon-34
icon-35
icon-37
icon-38
icon-39
icon-41
icon-42
icon-43
icon-45
icon-46
icon-48
led
lighttube
plug
plug-1
socket
socket-1
socket-2
switch
tool
vector
retoure
solar
user
board
shopping-bag
bestellungen
board
board-add
cart-incart
cart
cart-add
hilfe
koffer
kontakt
Message text
Comments
Forms
Images
image-radius
image-rounded
