20 Jahre Erfahrung Experten-Beratung Online & vor Ort 98% Zufriedenheit 30 Tage Rückgaberecht
Zur Startseite wechseln
Zur Startseite wechseln
Merkliste
0,00 €*
Warenkorb

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.

btn btn-primary btn-lg btn btn-secondary btn-lg btn btn-tertiary btn-lg btn btn-light btn-lg btn btn-outline-primary btn-lg btn btn-outline-secondary btn-lg
btn btn-primary btn btn-secondary btn btn-tertiary btn btn-light btn btn-outline-primary btn btn-outline-secondary
btn btn-primary btn-sm btn btn-secondary btn-sm btn btn-tertiary btn-sm btn btn-light btn-sm btn btn-outline-primary btn-sm btn btn-outline-secondary btn-sm
btn btn-primary btn-lg btn btn-secondary btn-lg btn btn-tertiary btn-lg btn btn-light btn-lg btn btn-outline-primary btn-lg btn btn-outline-secondary btn-lg
btn btn-primary btn btn-secondary btn btn-tertiary btn btn-light btn btn-outline-primary btn btn-outline-secondary
btn btn-primary btn-sm btn btn-secondary btn-sm btn btn-tertiary btn-sm btn btn-light btn-sm btn btn-outline-primary btn-sm btn btn-outline-secondary btn-sm
btn btn-primary btn-lg btn btn-secondary btn-lg btn btn-tertiary btn-lg btn btn-light btn-lg btn btn-outline-primary btn-lg btn btn-outline-secondary btn-lg
btn btn-primary btn btn-secondary btn btn-tertiary btn btn-light btn btn-outline-primary btn btn-outline-secondary
btn btn-primary btn-sm btn btn-secondary btn-sm btn btn-tertiary btn-sm btn btn-light btn-sm btn btn-outline-primary btn-sm btn btn-outline-secondary btn-sm
btn btn-primary btn-lg btn btn-secondary btn-lg btn btn-tertiary btn-lg btn btn-light btn-lg btn btn-outline-primary btn-lg btn btn-outline-secondary btn-lg
btn btn-primary btn btn-secondary btn btn-tertiary btn btn-light btn btn-outline-primary btn btn-outline-secondary
btn btn-primary btn-sm btn btn-secondary btn-sm btn btn-tertiary btn-sm btn btn-light btn-sm btn btn-outline-primary btn-sm btn btn-outline-secondary btn-sm
btn btn-primary btn-lg btn btn-secondary btn-lg btn btn-tertiary btn-lg btn btn-light btn-lg btn btn-outline-primary btn-lg btn btn-outline-secondary btn-lg
btn btn-primary btn btn-secondary btn btn-tertiary btn btn-light btn btn-outline-primary btn btn-outline-secondary
btn btn-primary btn-sm btn btn-secondary btn-sm btn btn-tertiary btn-sm btn btn-light btn-sm btn btn-outline-primary btn-sm btn btn-outline-secondary btn-sm

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-block

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

Action Another action Something else here