Styleguide

Fonts

Malone Serif
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--malone
Lars Malone
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--lars
Lars Malone Bold
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--lars with font-weight: 700; declared
OR helper class: .font--lars-bold
Bernhard Modern Bold
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--bernhard-bold
Kuenstler Script
AaBbCc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 &.,?!@()#$%*+-=:;
.font--kuenstler

Typography

Title H1
Sinnliches Leder gebettet in einem Potpourri von Hölzern.
.title--h1
Title H2
Rauchig und warm, von den Strahlen der Abendsonne in bronzenen Glanz gehüllt.
.title--h2
Title H3
Berauschender Wacholder und frische Grapefruit sorgen für erquickende Duftnoten.
.title--h3
Title H4
Ein mysteriöser Duft liegt in der Luft. Könnte es Vetiver sein?
.title--h4
Title H4 Secondary
Ein mysteriöser Duft liegt in der Luft. Könnte es Vetiver sein?
.title--h4-secondary
Title H5
Hello, tiny header.
.title--h5
Title H5 Secondary
Hello, tiny header.
.title--h5-secondary
Title H6
Hey, not so bold tiny header.
.title--h6
Body Text
Sinnliches Leder gebettet in einem Potpourri von Hölzern. Rauchig und warm, von den Strahlen der Abendsonne in bronzenen Glanz gehüllt. Berauschender Wacholder und frische Grapefruit sorgen für erquickende Duftnoten. Ein mysteriöser Duft liegt in der Luft. Könnte es Vetiver sein?
.body-text
Body Text 2
Sinnliches Leder gebettet in einem Potpourri von Hölzern. Rauchig und warm, von den Strahlen der Abendsonne in bronzenen Glanz gehüllt. Berauschender Wacholder und frische Grapefruit sorgen für erquickende Duftnoten. Ein mysteriöser Duft liegt in der Luft. Könnte es Vetiver sein?
.body-text2
Body Text 3
Sinnliches Leder gebettet in einem Potpourri von Hölzern. Rauchig und warm, von den Strahlen der Abendsonne in bronzenen Glanz gehüllt. Berauschender Wacholder und frische Grapefruit sorgen für erquickende Duftnoten. Ein mysteriöser Duft liegt in der Luft. Könnte es Vetiver sein?
.body-text3

Colors

Brand Colors
Schwarz
#1c1c1c
$color-black
Gray
#707070
$color-gray
Creme
#fcf9ee
$color-cream
Cream Stroke
#e2e1d7
$color-cream-stroke
Cream Disabled
#e1e2d7
$color-cream-disabled
System Colors
Active
#cc0000
$color-invalid
Inaktiv
#0cc42f
$color-valid
Disabled
#ebbb00
$color-warning

Icons

- 2_column_grid
- 4_column_grid
- Konto
- arrow-left
- arrow-right
- back_to_top
- warenkorb
- bird-bottle
- bottle-label
- cheveron_small
- cheveron_small--down
- cheveron_small--left
- chevron
- chevron--left
- chevron--left-v2
- chevron-v2
- circle
- Schließen
- close_small
- dot_circle
- e-mail
- facebook
- gift_close
- hamburger
- hover-arrows-left-dark
- hover-arrows-left-light
- hover-arrows-right-dark
- hover-arrows-right-light
- information
- instagram
- large_circle
- large_left_arrow
- large_right_arrow
- left_arrow
- livechat
- logo
- map-maker
- map-maker_filled
- microphone
- minus
- minus-v2
- pause
- pinterest
- abspielen
- plus
- plus-v2
- radio_button
- radio_button_clicked
- reviews_tick
- right_arrow
- suche
- speaker_button
- speaker_mute
- speech-bubble-tail-inner
- speech-bubble-tail-outer
- tick
- tick_box
- tick_box_checked
- twitter
- weibo
- weixin
- wunschliste
- wishlist_filled
- youtube
- zoom

<svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter">
  <title id="my-unique-id">ADA title goes here</title>
  <use xlink:href="#twitter"></use>
</svg>

Buttons & Links

Link - Lowercase & Underlined
Geschenke entdecken
.link .link--min
Link - Lowercase & Underlined on hover
Route anzeigen
.link .link-small
Link - Uppercase & Underlined
Shop the family
.link .link--caps
Button - Large with dark background and light text
In den Warenkorb
.button .button--dark .button--large
Button - Large Button Disabled
In den Warenkorb
.button .button--large-disabled
Button - Dark background with light text
See all [20]
.button .button--dark
Button - Disabled
In den Warenkorb
.button .button--disabled
Button - No background with dark border & Underlined on hover
Facebook
.button .button--light .button--large
Button - No background with dark border
Floral
.button .button--secondary
Button - Text
Abbrechen und neu starten
.button .button--text
Button - Secondary Dark Button with light text
Dark Button Secondary
.button--dark-secondary
Button - CTA Pill Storke
CTA Pill Storke
.cta-pill-stroke
Button - CTA Pill Storke - Dark background with light text
CTA Pill Storke Black
.cta-pill-stroke--dark
Button - CTA Pill Storke - white background black text
CTA Pill Storke White
.cta-pill-stroke--white

Controls / Filters

Filter - Standard de-selected
Body 2
Lars Malone Pro
Body 2
.cta-pill-stroke--deselected
Filter - Active / Selected
Body 2
Lars Malone Pro
Body 2
.cta-pill-stroke--selected
Selected Filters / Remove

Body 2

Lars Malone Pro

Body 2
.remove-filter-text

Controls / Tabs

Tabs - Deselected
Für Ihn
Header Four
Header Four
.control-tab-deselected
Tabs - Active / Selected
Für Ihn
Header Four
Header Four
.cta-pill-stroke

Layout Helpers

This section lists layout helpers, common block widths, and padding rules.

Horizontal Alignment
left
.horizontal-align-left
right
.horizontal-align-right
center
.horizontal-align-center
Vertical Alignment
Kopf
.justify-start
center
.justify-center
bottom
.justify-end

Container Maximum Widths - Plus padding rules

BITTE BEACHTEN: padding amount changes depending on screen or device width. Larger screens have more left / right padding.

Full width: 100%
.container-max-width-full
Full width: 100% with padding
.container-max-width-full .container-max-width--padded
Large: 1440px
.container-max-width-large
Large: 1440px with padding
.container-max-width-large .container-max-width--padded
Large indented: 1342px
.container-max-width-large-indented
Large indented: 1342px width padding
.container-max-width-large-indented .container-max-width--padded

Content Service

Stardust Content Block

MPP grid example

Full Width example

.elc-content-block

Prodcat Service

Quantity Selector
.elc-quantity-selector
Product Brief Wrapper
.elc-product-brief
Product Cross Sell
.elc-product-cross-sell
Image Navigation Menu
.elc-image-nav-menu-item
Shade Picker
.elc-shade-picker
Shade Picker Button
.elc-shade-picker-button
Size Picker
.elc-size-picker

Willkommen!

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

Schon gewusst?

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

ABONNIEREN

Schon gewusst?