Sicherer Einkauf
Kompetente Beratung Online & vor Ort
Schnelle Lieferung
30 Tage Rückgaberecht
Merkliste

Styleguide Elektroland24


Dies ist eine Übersicht aller Elemente.

Colors


Folgende Farbwerte und Klassen wurden festgelegt.

Farbwerte

elektroland-blue
#007ce5
elektroland-blue-dark
#004871
elektroland-blue-light
#7fbedf
elektroland-red
#a0001c
elektroland-black
#000000
elektroland-gray-light
#f5f5f5
elektroland-gray
#eaeaea
elektroland-gray-dark
#6A6A6A
elektroland-white
#ffffff

Text Colors

Folgende Farbklassen stehen zur Verfügung

.text-black
(Standard)
.text-blue
.text-white
.text-gray

Background Colors

Folgende Hintergrundfarben stehen zur Verfügung

.bg-blue
.bg-blue-light
.bg-gray
.bg-gray-light

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?

Icons


Size SM

Pack: "Elektroland"

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
Pack: "Elektroland24"

user

board

shopping-bag

bestellungen

board

board-add

cart-incart

cart

hilfe

koffer

kontakt

Message text

Comments

Size MD / Standard

Pack: "Elektroland"

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
Pack: "Elektroland24"

user

board

shopping-bag

bestellungen

board

board-add

cart-incart

cart

hilfe

koffer

kontakt

Message text

Comments

Size LG

Pack: "Elektroland"

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
Pack: "Elektroland24"

user

board

shopping-bag

bestellungen

board

board-add

cart-incart

cart

cart-add

hilfe

koffer

kontakt

Message text

Comments

Forms