CALENDRIER DE L’AVENT
CALENDRIER DE L’AVENT
Noël
Noël
NOS FAVORIS
NOS FAVORIS
FORMATS DÉCOUVERTE
FORMATS DÉCOUVERTE
LIME BASIL & MANDARIN
LIME BASIL & MANDARIN
WOOD SAGE & SEA SALT
WOOD SAGE & SEA SALT
ENGLISH PEAR & FREESIA
ENGLISH PEAR & FREESIA
MYRRH & TONKA
MYRRH & TONKA
Ajouter aux favoris Wishlist
Mon panier My Bag

Bienvenue !

En quoi notre équipe JO MALONE LONDON peut-elle vous aider aujourd’hui ?

Conseil en fragrancesService clients
Styleguide

Fonts

  • Malone Serif
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​ 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--malone
  • Lars Malone
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​ 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--lars
  • Lars Malone Bold
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--lars with font-weight: 700; declared
    OR helper class: .font--lars-bold
  • Bernhard Modern Bold
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--bernhard-bold
  • Kuenstler Script
    AaBbCc

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​ a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z 1​2​3​4​5​6​7​8​9​0​ &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .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
      2_column_grid
    • 4_column_grid
      4_column_grid
    • compte
    • arrow-left
      arrow-left
    • arrow-left-new
      arrow-left-new
    • arrow-right
      arrow-right
    • arrow-right-new
      arrow-right-new
    • back_to_top
      back_to_top
    • bag
      panier
    • bird-bottle
      bird-bottle
    • bottle-label
      bottle-label
    • cc_maestro
      cc_maestro
    • cheveron_small
      cheveron_small
    • cheveron_small--down
      cheveron_small--down
    • cheveron_small--left
      cheveron_small--left
    • chevron
      chevron
    • chevron--left
      chevron--left
    • chevron--left-v2
      chevron--left-v2
    • chevron-v2
      chevron-v2
    • circle
      circle
    • close
      fermer
    • close_small
      close_small
    • dot_circle
      dot_circle
    • adresse e-mail
    • facebook
    • gift_close
      gift_close
    • hamburger
      hamburger
    • hover-arrows-left-dark
      hover-arrows-left-dark
    • hover-arrows-left-light
      hover-arrows-left-light
    • hover-arrows-right-dark
      hover-arrows-right-dark
    • hover-arrows-right-light
      hover-arrows-right-light
    • information
      information
    • instagram
      instagram
    • large_circle
      large_circle
    • large_left_arrow
      large_left_arrow
    • large_right_arrow
      large_right_arrow
    • left_arrow
      left_arrow
    • livechat
      livechat
    • logo
    • map-maker
      map-maker
    • map-maker_filled
      map-maker_filled
    • mc
      mc
    • microphone
      microphone
    • minus
      minus
    • minus-v2
      minus-v2
    • pause
      pause
    • paypal
      paypal
    • pinterest
      pinterest
    • play
      jouez
    • plus
      plus
    • plus-v2
      plus-v2
    • radio_button
      radio_button
    • radio_button_clicked
      radio_button_clicked
    • reviews_tick
      reviews_tick
    • right_arrow
      right_arrow
    • search
      rechercher
    • sofort
      sofort
    • speaker_button
      speaker_button
    • speaker_mute
      speaker_mute
    • speech-bubble-tail-inner
      speech-bubble-tail-inner
    • speech-bubble-tail-outer
      speech-bubble-tail-outer
    • star_filled
      star_filled
    • star_outline
      star_outline
    • tick
      tick
    • tick_box
      tick_box
    • tick_box_checked
      tick_box_checked
    • twitter
    • visa
      visa
    • weibo
      weibo
    • weixin
      weixin
    • wishlist
      liste d’envies
    • wishlist_filled
      wishlist_filled
    • youtube
      youtube
    • zoom
      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 - Auto Width
    Button Auto Width
    .button .button--auto-width
  • Button - Auto Width Border Radius
    Button Auto Width Border Radius
    .button .button--auto-width-border-radius
  • 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
  • Button - Small
    Lorem ipsum dolor
    .button-small
  • Button - Small - border radius
    Lorem ipsum dolor
    .button-small--border-radius
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
    close_small
    Body 2
    close_small
    Lars Malone Pro
    close_small
    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
Styleguide Tools