Lighthouse Styleguide
Layouts Dimensions Breakpoints Colors Typography Stylistic elements Useful Form elements Icons PackshotsLandingPage Layouts
Dimensions
full width 100% = max. 882px)
full width 100% = max. 348px
Breakpoints
class="hidden-mobile"
class="visible-mobile"
@media (max-width: 480px)
class="hidden-tablet"
class="visible-tablet"
@media (min-width: 481px) and (max-width: 1024px)
class="hidden-tablet-p"
class="visible-tablet-p"
@media (min-width: 481px) and (max-width: 768px
class="hidden-tablet-l"
class="visible-tablet-l"
@media (min-width: 769px) and (max-width: 1024px)
class="hidden-desktop"
class="visible-desktop"
@media (min-width: 1025px)
Colors
Primary Color Palette - Interaction
Secondary Color Palette - Accentuation
Greys Color Palette
Validation Color Palette
Typography
H1
font-size: 2em;
margin: 0.67em 0;
Headline H1
H2
font-size: 1.5em;
(Browser-Default)
Headline H2
H3
font-size: 1.17em;
(Browser-Default)
Headline H3
H4
font-size: 1em;
(Browser-Default)
Headline H4
H5
font-size: .83em;
(Browser-Default)
Headline H5
P
(also without any styles or tags)
font-size: 15px;
line-height: 1.5em;
class="fw-bold"
class="bold"
font-weight: 800
class="fw-normal"
class="noBold"
font-weight: 400
class="fw-light"
font-weight: 300
class="fw-extra-light"
font-weight: 200
class="ff-hmw-sans"
font-family: 'HaufeMerriweatherSans', Arial, sans-serif;
class="ff-hmw"
font-family: 'HaufeMerriweather', Times, serif;
class="ff-bebasneue"
font-family: 'Bebasneue', Arial, sans-serif;
class="fSize12"
class="fSize13"
class="fSize14"
class="fSize15"
class="fSize16"
class="fSize18"
class="fSize20"
class="fSize22"
class="fSize24"
class="fSize28"
class="fSize30"
class="fSize36"
class="fSize40"
class="fSize48"
class="font"
class="black"
class="blue1"
class="blue2"
class="blue3"
class="blue4"
class="blue5"
class="blue6"
class="blue7"
class="grey1"
class="grey2"
class="grey3"
class="grey4"
class="grey5"
class="grey6"
class="grey7"
class="grey8"
class="green1"
class="green2"
class="orange"
class="orange1"
class="pink"
class="red"
class="yellow1"
class="yellow2"
class="white"
<ul>
<li/>
<li/>
</ul>
Browser default
- erster Punkt
- zweiter Punkt
- dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- vierter Punkt
<ul class="list_style_bullet">
<li/>
<li/>
</ul>
- erster Punkt
- zweiter Punkt
- dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- vierter Punkt
<ul class="list_style_tick">
<li/>
<li/>
</ul>
- erster Punkt
- zweiter Punkt
- dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- vierter Punkt
<ol>
<li/>
<li/>
</ol>
- erster Punkt
- zweiter Punkt
- dritter Punkt: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- vierter Punkt
<ul class="link_list">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Stylistic elements
class="lighthouse-box"
class="lighthouse-divider-before"
class="lighthouse-divider-after"
class="lighthouse-divider-before-small"
class="lighthouse-divider-after-small"
class="lighthouse-gradient-light-to-dark"
class="lighthouse-gradient-dark-to-light"
class="lighthouse-gradient-bottom-dark-to-top-light"
class="lighthouse-gradient-footer"
TBD
background-image: linear-gradient(-125deg,
#0b8041 0%, #0d8c59 10%, #109872 20%, #13a48a 30%,
#16afa3 40%,#40b686 50%,#6abc69 60%,#95c24c 70%,
#bfc82f 80%, #e9cf11 90%,#e9cf11 100%)
TBD
background-image: linear-gradient(-125deg,
#00ffc4 0%, #19d7da 35.9%, #3e45ff 100%)
TBD
background-image: linear-gradient(-125deg,
#040077 0%, #45c6ff 75.5%, #fffe00 100%)
TBD
background-image: linear-gradient(-125deg,
#00ffc4 0%, #23c6e3 21.6%, #3e45ff 50%,
#80f 78.5%,#f050a7 100%)
class="lighthouse-background lighthouse-background-stripes"
class="lighthouse-background lighthouse-background-dots"
class="lighthouse-background lighthouse-background-dots2"
Useful Classes
class="floatLeft"
float: left;
class="floatRight"
float: right;
class="clearline"
clear: both;
class="clearfix"
(Fix für die Höhe von Containern, in denen sich Float-Elemente befinden)
class="hidden"
ausblenden
class="book_tmpl_show"
zeigt Elemente nur bei Büchern an (PDS)
class="book_tmpl_hide"
blendet Elemente nur bei Bücher aus (PDS)
Grid Container
<div class="rowContainer">
<div class="row">
<div class="col ccol8 col6 acol12">
content here
</div>
<div class="col ccol4 col6 acol12">
content here
</div>
</div>
</div>
12er Grid
Form elements
<input type="text">
<input type="text" class="valid">
<input type="text" class="warning">
<input type="text" class="error">
<input type="text" class="disabled" disabled>
<select>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
</select>
<select class="valid">...</select>
<select class="warning">...</select>
<select class="error">...</select>
<select class="disabled" disabled>...</select>
<div class="lighthouse-radio">
<input type="radio" id="r1"><label for="r1">Beispiel</label>
<input type="radio" id="r2" class="warning"><label for="r2">Beispiel</label>
<input type="radio" id="r3" class="error"><label for="r3">Beispiel</label>
<input type="radio" id="r4" class="disabled" disabled><label for="r4">Beispiel</label>
</div>
<div class="lighthouse-checkbox">
<input type="checkbox" id="c1"><label for="c1">Beispiel</label>
<input type="checkbox" id="c2" class="warning"><label for="c2">Beispiel</label>
<input type="checkbox" id="c3" class="error"><label for="c3">Beispiel</label>
<input type="checkbox" id="c4" class="disabled" disabled><label for="c4">Beispiel</label>
</div>
Icons
class="icon-empty"
class="icon-download"
class="icon-arrow-erase"
class="icon-paypal"
class="icon-visa"
class="icon-mastercard"
class="icon-invoice"
class="icon-debit"
class="icon-info"
class="icon-star-half"
class="icon-arrow-erase"
class="icon-book"
class="icon-menu"
class="icon-tolino"
class="icon-kindle"
class="icon-haufe"
class="icon-apple"
class="icon-android"
class="icon-pen"
class="icon-index"
class="icon-filter"
class="icon-clock"
class="icon-arrow-down"
class="icon-arrow-rewind"
class="icon-arrow-totop"
class="icon-calendar"
class="icon-cart"
class="icon-checkmark"
class="icon-chevron-breadcrumb"
class="icon-chevron-down"
class="icon-chevron-left"
class="icon-chevron-right"
class="icon-chevron-up"
class="icon-chevrons-left"
class="icon-chevrons-right"
class="icon-cogwheels"
class="icon-compare"
class="icon-content"
class="icon-cross"
class="icon-e-trust"
class="icon-envelope-rounded"
class="icon-envelope"
class="icon-eye-crossed"
class="icon-eye"
class="icon-facebook"
class="icon-gift"
class="icon-globe-net"
class="icon-image"
class="icon-linkedin"
class="icon-magnifier"
class="icon-page"
class="icon-paper-plane"
class="icon-phone"
class="icon-printer"
class="icon-questionmark"
class="icon-scales"
class="icon-smiley"
class="icon-speech-bubble"
class="icon-star-empty"
class="icon-star-full"
class="icon-trash"
class="icon-truck"
class="icon-twitter"
class="icon-update-clock"
class="icon-user-male"
class="icon-xing"
class="icon-play"
class="icon-stoerer" style="height:58px;width:51px;"
class="icon-stoerer" style="height:115px;width:101px;"
class="icon-stoerer" style="height:230px;width:201px;"
class="icon-ssl" style="height:56px;width:59px;"
class="icon-uhr" style="height:60px;width:60px;"
class="icon-newsletter" style="height:58px;width:60px;"
class="icon-edge" style="height:60px;width:60px;"
Packshot Dimensions
$$Product_image(bestNr,Size)
last update: 11.9.23 by ML. Updated gradients.