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
Des notes de cuir sensuelles enveloppées d’un mélange boisé.
.title--h1
Title H2
À la fois chaleureuses et fumées, brunies par les rayons du soleil couchant.
.title--h2
Title H3
Animées par l’énergie vibrante du genièvre et la fraîcheur du pamplemousse.
.title--h3
Title H4
Une mystérieuse note de vétiver flotte dans l’air.
.title--h4
Title H4 Secondary
Une mystérieuse note de vétiver flotte dans l’air.
.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
Des notes de cuir sensuelles enveloppées d’un mélange boisé. À la fois chaleureuses et fumées, brunies par les rayons du soleil couchant. Animées par l’énergie vibrante du genièvre et la fraîcheur du pamplemousse. Une mystérieuse note de vétiver flotte dans l’air.
.body-text
Body Text 2
Des notes de cuir sensuelles enveloppées d’un mélange boisé. À la fois chaleureuses et fumées, brunies par les rayons du soleil couchant. Animées par l’énergie vibrante du genièvre et la fraîcheur du pamplemousse. Une mystérieuse note de vétiver flotte dans l’air.
.body-text2
Body Text 3
Des notes de cuir sensuelles enveloppées d’un mélange boisé. À la fois chaleureuses et fumées, brunies par les rayons du soleil couchant. Animées par l’énergie vibrante du genièvre et la fraîcheur du pamplemousse. Une mystérieuse note de vétiver flotte dans l’air.
.body-text3

Colors

Brand Colors
Noir
#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
Inactif
#0cc42f
$color-valid
Disabled
#ebbb00
$color-warning

Icons

- 2_column_grid
- 4_column_grid
- compte
- arrow-left
- arrow-right
- back_to_top
- panier
- bird-bottle
- bottle-label
- cheveron_small
- cheveron_small--down
- cheveron_small--left
- chevron
- chevron--left
- chevron--left-v2
- chevron-v2
- circle
- fermer
- close_small
- dot_circle
- adresse 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
- jouez
- plus
- plus-v2
- radio_button
- radio_button_clicked
- reviews_tick
- right_arrow
- rechercher
- speaker_button
- speaker_mute
- speech-bubble-tail-inner
- speech-bubble-tail-outer
- tick
- tick_box
- tick_box_checked
- twitter
- weibo
- weixin
- liste d’envies
- 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
Acheter des cadeaux
.link .link--min
Link - Lowercase & Underlined on hover
Obtenir l’itinéraire
.link .link-small
Link - Uppercase & Underlined
Shop the family
.link .link--caps
Button - Large with dark background and light text
Ajouter au panier
.button .button--dark .button--large
Button - Large Button Disabled
Ajouter au panier
.button .button--large-disabled
Button - Dark background with light text
See all [20]
.button .button--dark
Button - Disabled
Ajouter au panier
.button .button--disabled
Button - No background with dark border & Underlined on hover
Facebook
.button .button--light .button--large
Button - No background with dark border
Les Floraux
.button .button--secondary
Button - Text
Annuler et recommencer
.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
Pour lui
Header Four
Header Four
.control-tab-deselected
Tabs - Active / Selected
Pour lui
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
tête
.justify-start
center
.justify-center
bottom
.justify-end

Container Maximum Widths - Plus padding rules

REMARQUE : 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

Bienvenue !

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

Le saviez-vous ?

Fonts

Typography

Colors

Content Service

Stardust Content Block

MPP grid example

Full Width example

Prodcat Service

S’INSCRIRE

Le saviez-vous ?