Steinbach - Elements Overview

Colors

Primärfarben

Blue

#2F5B87

RGB: (47, 91, 135)

CSS Klasse: bg-blue
Anthracite

#1D343D

RGB: (29, 52, 61)

CSS Klasse: bg-secondary
Orange

#F18B02

RGB: (241, 139, 2)

CSS Klassen: bg-primary

Sekundärfarben

Blue

#2F5B87

RGB: (47, 91, 135)

CSS Klassen: bg-blue
15% Blue

#E0E6ED

RGB: (224, 230, 237)

CSS Klasse: bg-blue-lighter
15% Orange

#FDECDA

RGB: (253, 236, 218)

CSS Klassen: bg-primary-lighter, bg-orange-lighter

Graustufen

White

#FFFFFF

RGB: (255, 255, 255)

CSS Klassen: bg-white
Gray 1

#FAF8F6

RGB: (250, 248, 246)

CSS Klassen: bg-gray1
Gray 2

#EFEDEB

RGB: (239, 237, 235)

CSS Klassen: bg-gray2
Gray 3

#BFBDBB

RGB: (191, 189, 187)

CSS Klassen: bg-gray3
Gray 4

#909090

RGB: (144, 144, 144)

CSS Klassen: bg-gray4
Black

#000000

RGB: (0, 0, 0)

CSS Klassen: bg-black

Fonts

Font Styles

Thin 100 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-thin

Thin 100 Italic| The quick brown fox jumps over the lazy dog.

CSS Klassen: font-thin, italic

ExtraLight 200 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-extralight

ExtraLight 200 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-extralight, italic

Light 300 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-light

Light 300 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-light, italic

Regular 400 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-normal

Regular 400 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-normal, italic

Medium 500 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-medium

Medium 500 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-medium, italic

SemiBold 600 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-semibold

SemiBold 600 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-semibold, italic

Bold 700 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-bold

Bold 700 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-bold, italic

ExtraBold 800 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-extrabold

ExtraBold 800 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-extrabold, italic

Black 900 | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-black

Black 900 Italic | The quick brown fox jumps over the lazy dog.

CSS Klassen: font-black, italic

Icons

arrow-right.svg
globe.svg
heart.svg
search.svg
user.svg

Text-Elements

H1 - The quick brown fox jumps over the lazy dog.

Inter - Bold - 55px - mobile: 32px

H2 - The quick brown fox jumps over the lazy dog.

Inter - Bold - 32px - mobile: 28px

PDP Specs - The quick brown fox jumps over the lazy dog.

Inter - Light - 35px - mobile: 24px

H3 - The quick brown fox jumps over the lazy dog.

Inter - Medium - 24px - mobile: 18px

Accordion Headline - The quick brown fox jumps over the lazy dog.

Inter - Regular - 18px

Subline - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px

Body regular - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px

Body link - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px

Body small - The quick brown fox jumps over the lazy dog.

Inter - Regular - 12px

Body regular - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px

Unordered/Ordered List - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px Inter - Regular - 18px

Button - The quick brown fox jumps over the lazy dog.

Inter - Regular - 16px

Button primary - The quick brown fox jumps over the lazy dog.

Inter - Bold - 16px

Caption - The quick brown fox jumps over the lazy dog.

Inter - Regular - 14px

Caption Bold - The quick brown fox jumps over the lazy dog.

Inter - Bold - 14px

Caption - The quick brown fox jumps over the lazy dog.

Inter - Bold - 12px

Listen

  1. Lorem ipsum dolor sit
  2. Sed diam nonumy
  3. Dolore magna aliquyam
  4. At vero eos et accusam
  5. Stet clita kasd guberg
  6. Lorem ipsum dolor sit
  7. Lorem ipsum dolor sit no
  • Lorem ipsum dolor sit
  • Sed diam nonumy
  • Dolore magna aliquyam
  • At vero eos et accusam
  • Stet clita kasd guberg
  • Lorem ipsum dolor sit
  • Lorem ipsum dolor sit no
CSS Klassen: text-list

Text

Lorem ipsum dolor 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 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.

CSS Klassen: bodytext

Lorem ipsum dolor 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 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.

CSS Klassen: bodytext-bold

Links

Link

Lorem ipsum dolor 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 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.

Buttons

Primary Button

CSS Klassen: btn btn-primary
disabled

Secondary Button

CSS Klassen: btn btn-secondary
Attribute: disabled

Warenkorb Button

CSS Klassen: .btn[data-addto="cart"], #product-addtocart-button, .btn[form="product_addtocart_form"]
Attribute: disabled

Input-Elements