Profitez de deux miniatures deluxe parfums offertes dès 180€, lors du paiement.

Découvrir
Les coffrets découverte
Service d'essai
Formats voyage 10ml
Les parfumeurs
La pyramide olfactive
Perfume Finder
Parfums
Parfums Femme
Parfums Homme
Portrait of a Lady
Musc Ravageur
Promise
Contre-Jour New
Desert Gems
Tous les parfums
Cadeaux
Coffrets
Idées Cadeaux
Bain et corps
Maison
Services
PARFUMEURS
Editions de Parfums
La Revue
Frederic Malle
Les Boutiques

Styleguide

Fonts
Headers
Text
Default Headings with Paragraphs
Colors
Buttons
Icons
Forms
Adaptive Placeholder
Dropdown

Fonts

Bodoni LT Pro Book
The quick brown fox jumps over the lazy dog
@extend %font-bodoni-book;
Bodoni LT Pro Roman
The quick brown fox jumps over the lazy dog
@extend %font-bodoni;
Bodoni LT Pro Bold
The quick brown fox jumps over the lazy dog
@extend %font-bodoni-bold;
Helvetica Neue LT Pro 45 Light
The quick brown fox jumps over the lazy dog
@extend %font-helvetica-neue-light;
Helvetica Neue LT Pro 55 Roman
The quick brown fox jumps over the lazy dog
@extend %font-helvetica-neue-roman;
Helvetica Neue LT Pro 65 Medium
The quick brown fox jumps over the lazy dog
@extend %font-helvetica-neue-medium;

Headers

Heading 1
Page Heading
@extend %heading--1;
// or
@include heading--1;
heading--1
Heading 1 (with underline)
Page Heading with Underline
@extend %heading--1;
@extend %heading--1__underline;
// or
@include heading--1__underline;
heading--1 heading--1__underline
Heading 2
Hero Heading
@extend %heading--2;
// or
@include heading--2;
heading--2
Heading 3
Section Heading
@extend %heading--3;
// or
@include heading--3;
heading--3
Heading 4
Section Sub Heading
@extend %heading--4;
// or
@include heading--4;
heading--4
Heading 5
Section Heading 2
@extend %heading--5;
// or
@include heading--5;
heading--5
Heading 6
Section Sub Heading 2
@extend %heading--6;
// or
@include heading--6;
heading--6

Text

Pull Quote
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
@extend %copy--quote-sans;
// or
@include copy--quote-sans;
copy--quote-sans
Pull Quote Alternative
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
@extend %copy--quote-serif;
// or
@include copy--quote-serif;
copy--quote-serif
Intro Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@extend %copy--intro;
// or
@include copy--intro;
copy--intro
Error Message
Error Message style
@extend %copy--error;
// or
@include copy--error;
copy--error

Default Headings with Paragraphs

h1 heading

This is a text link. This is italic text. This is bold text. This is bold and italic text.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

h2 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

h3 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h4 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h5 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

h6 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est.

Colors

  • #000000 $color-black
  • #fffffff $color-white
  • #ff0000 $color-red
  • #eb3300 $color-orange
  • #009900 $color-green
  • #dfdfdf $color-lighter-gray
  • #cccccc $color-light-gray
  • #989898 $color-gray
  • #666666 $color-dark-gray
  • opacity 70% $color-black-overlay
  • opacity 70% $color-white-overlay

Buttons

Primary Button
Shop Now
@extend %button;
// or
@include button;
button
Primary Alternative Button
Shop Now
@extend %button;
@extend %button--dark;
button button--dark
Secondary Button
Shop Now
@extend %button-secondary;
button-secondary
Large Button
Add to Bag
@extend %button;
@extend %button--large;
button button--large
Full Width Button
Shop Now
@extend %button; // or %button-secondary, etc.
width: 100%;
button button--wide
Disabled Button
Sold Out
button button--disabled
Text Button
Find It
@extend %link;
// or
@include link;
link

Icons

Also available as a mixin e.g. @include icon("icon--plus");
  • icon icon--accessibility
  • icon icon--bag
  • icon icon--caret--down
  • icon icon--caret--left
  • icon icon--caret--right
  • icon icon--caret--up
  • icon icon--checkbox--checked
  • icon icon--checkbox
  • icon icon--circle-caret--left
  • icon icon--circle-caret--right
  • icon icon--close
  • icon icon--email
  • icon icon--facebook
  • icon icon--hamburger
  • icon icon--head--outline
  • icon icon--head--solid
  • icon icon--heart--filled
  • icon icon--heart--outline
  • icon icon--instagram
  • icon icon--livechat
  • icon icon--location--filled
  • icon icon--location
  • icon icon--logo
  • icon icon--map-marker
  • icon icon--minus
  • icon icon--pinterest--circle
  • icon icon--pinterest
  • icon icon--play
  • icon icon--plus
  • icon icon--radio--checked
  • icon icon--radio
  • icon icon--search
  • icon icon--stars
  • icon icon--triman
  • icon icon--twitter
  • icon icon--youtube--play
  • icon icon--youtube

Forms









Adaptive Placeholder

.adpl
.no-adpl

If you want to use placeholder text without the adaptive placeholder feature just add the "no-adpl" class directly to the form field element.

Dropdown

.selectBox
selectBox
Toggle Code