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
Zwoel leer omhuld door diverse houtsoorten.
.title--h1
Title H2
Direct rokerig en warm, gebronsd door de avondzon.
.title--h2
Title H3
Verlevendigd met bruisende jeneverbes en frisse pompelmoes.
.title--h3
Title H4
Een mysterieus vleugje vetiver dat in de lucht blijft hangen.
.title--h4
Title H4 Secondary
Een mysterieus vleugje vetiver dat in de lucht blijft hangen.
.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
Zwoel leer omhuld door diverse houtsoorten. Direct rokerig en warm, gebronsd door de avondzon. Verlevendigd met bruisende jeneverbes en frisse pompelmoes. Een mysterieus vleugje vetiver dat in de lucht blijft hangen.
.body-text
Body Text 2
Zwoel leer omhuld door diverse houtsoorten. Direct rokerig en warm, gebronsd door de avondzon. Verlevendigd met bruisende jeneverbes en frisse pompelmoes. Een mysterieus vleugje vetiver dat in de lucht blijft hangen.
.body-text2
Body Text 3
Zwoel leer omhuld door diverse houtsoorten. Direct rokerig en warm, gebronsd door de avondzon. Verlevendigd met bruisende jeneverbes en frisse pompelmoes. Een mysterieus vleugje vetiver dat in de lucht blijft hangen.
.body-text3

Colors

Brand Colors
Zwart
#1c1c1c
$color-black
Gray
#707070
$color-gray
Crème
#fcf9ee
$color-cream
Cream Stroke
#e2e1d7
$color-cream-stroke
Cream Disabled
#e1e2d7
$color-cream-disabled
System Colors
Active
#cc0000
$color-invalid
Inactief
#0cc42f
$color-valid
Disabled
#ebbb00
$color-warning

Icons

- 2_column_grid
- 4_column_grid
- account
- arrow-left
- arrow-right
- back_to_top
- winkelmandje
- bird-bottle
- bottle-label
- cheveron_small
- cheveron_small--down
- cheveron_small--left
- chevron
- chevron--left
- chevron--left-v2
- chevron-v2
- circle
- sluiten
- 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
- speel
- plus
- plus-v2
- radio_button
- radio_button_clicked
- reviews_tick
- right_arrow
- zoeken
- speaker_button
- speaker_mute
- speech-bubble-tail-inner
- speech-bubble-tail-outer
- tick
- tick_box
- tick_box_checked
- twitter
- weibo
- weixin
- verlanglijst
- 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
SHOP GESCHENKEN
.link .link--min
Link - Lowercase & Underlined on hover
Routebeschrijving ophalen
.link .link-small
Link - Uppercase & Underlined
Shop the family
.link .link--caps
Button - Large with dark background and light text
Toevoegen aan winkelmandje
.button .button--dark .button--large
Button - Large Button Disabled
Toevoegen aan winkelmandje
.button .button--large-disabled
Button - Dark background with light text
See all [20]
.button .button--dark
Button - Disabled
Toevoegen aan winkelmandje
.button .button--disabled
Button - No background with dark border & Underlined on hover
Facebook
.button .button--light .button--large
Button - No background with dark border
Floraal
.button .button--secondary
Button - Text
Annuleren en opnieuw beginnen
.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
Voor hem
Header Four
Header Four
.control-tab-deselected
Tabs - Active / Selected
Voor hem
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
top
.justify-start
center
.justify-center
bottom
.justify-end

Container Maximum Widths - Plus padding rules

LET OP: 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

Hallo !

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

Wist u dat?

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

AANMELDEN

Wist u dat?