Facelift Hyvä - Elements Overview
Colors
Hex: #008393
RGB: 0 - 131 - 147
CSS Klassen: bg-petrolHex: #006E82
RGB: 0 - 110 - 130
CSS Klassen: bg-petroldarkHex: #202628
RGB: 0 - 131 - 147
CSS Klassen: bg-darkHex: #000
RGB: 0 - 0 - 0
CSS Klassen: bg-blackHex: #647882
RGB: 100 - 120 - 130
CSS Klassen: bg-stormHex: #BEC3C8
RGB: 190 - 195 - 200
CSS Klassen: bg-softgreyHex: #f1f1f1
RGB: 241 - 241 - 241
CSS Klassen: bg-lightHex: #fff
RGB: 255 - 255 - 255
CSS Klassen: bg-whiteHex: #BB0C0C
RGB: 185 - 24 - 24
CSS Klassen: bg-rubyHex: #DCAA50
RGB: 220 - 170 - 80
CSS Klassen: bg-goldFonts
Font Styles
Thin 100 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-thinThin 100 Italic| The quick brown fox jumps over the lazy dog.
CSS Klassen: font-thin, italicExtraLight 200 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-extralightExtraLight 200 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-extralight, italicLight 300 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-lightLight 300 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-light, italicRegular 400 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-normalRegular 400 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-normal, italicMedium 500 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-mediumMedium 500 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-medium, italicSemiBold 600 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-semiboldSemiBold 600 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-semibold, italicBold 700 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-boldBold 700 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-bold, italicExtraBold 800 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-extraboldExtraBold 800 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-extrabold, italicBlack 900 | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-blackBlack 900 Italic | The quick brown fox jumps over the lazy dog.
CSS Klassen: font-black, italicHeadlines Global
H1 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h1-mobile font-semibold xl:text-h1H2 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h2-mobile font-semibold xl:text-h2CSS Klassen: text-h3-mobile font-semibold xl:text-h3
H4 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h4-mobile font-semibold xl:text-h4
Headlines PDP
H1 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h1-pdp font-semiboldH2 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h2-pdp font-semiboldH3 - The quick brown fox jumps over the lazy dog.
CSS Klassen: text-h3-pdp font-semiboldText
Paragraph - The quick brown fox jumps over the lazy dog.
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: text-smListen
- 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
- 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
Buttons
Primary Button
CSS Klassen: btn btn-primaryPDS Primary Button
CSS Klassen: btn-pdp btn-primary Icon size: 24 / 24Secondary Button
CSS Klassen: btn btn-secondaryPDS Secondary Button
CSS Klassen: btn-pdp btn-secondaryTertiary Button
CSS Klassen: btn btn-tertiaryPDS Tertiary Button
CSS Klassen: btn-configLinks
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: text-sm