Styleguide

Grid

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
Nbre de col: x24 Gouttières ==> Desktop: 0px, Mobile/tablette: 0px 24 colonnes fluide - Desktop jusqu’à 1920px

Font/Typo

t-h1
.t-h1
t-h2
.t-h2
t-h3
.t-h3
t-h4
.t-h4
t-h5
.t-h5
t-h6
.t-h6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsum harum eos totam maxime facere error dolorum, quas quisquam voluptatum qui explicabo ad laudantium aliquid ipsam itaque quasi delectus, consectetur dicta nulla voluptate? Earum cupiditate maiores, suscipit quas doloremque, minus aliquid numquam quibusdam blanditiis velit cum, quisquam totam molestiae alias.

.t-text--lg

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsum harum eos totam maxime facere error dolorum, quas quisquam voluptatum qui explicabo ad laudantium aliquid ipsam itaque quasi delectus, consectetur dicta nulla voluptate? Earum cupiditate maiores, suscipit quas doloremque, minus aliquid numquam quibusdam blanditiis velit cum, quisquam totam molestiae alias.

.t-text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsum harum eos totam maxime facere error dolorum, quas quisquam voluptatum qui explicabo ad laudantium aliquid ipsam itaque quasi delectus, consectetur dicta nulla voluptate? Earum cupiditate maiores, suscipit quas doloremque, minus aliquid numquam quibusdam blanditiis velit cum, quisquam totam molestiae alias.

.t-text--sm

Colors

$red : #E30613
$blue : #004899
$darkblue : #232E5B
$black : #111111

Icons

#icon-caret-right
#icon-caret-left
#icon-play
#icon-promotion
#icon-abo-5
#icon-abo-10
#icon-abo-15
#icon-person
#icon-person-plain
#icon-heart
#icon-heart-plain

button/Link

Je suis un lien .t-link t-link--inverted
Je suis un lien .t-link t-link--xs
.c-button
.c-button .c-button--ghost
.c-button .c-button--secondary
.c-button .c-button--secondary.u-full-width

Checkbox/radio

.t-checkbox
.t-checkbox disabled

Tags product

Nouveau
.c-badge .c-badge--new
Promo -10%
.c-badge .c-badge--discount

Lazyload

Le Club Leader Price Srcset : snippet/sizes_img
Le Club Leader Price Picture : snippet/picture_img

Product card

Slider arrow

.c-slider-arrow
.c-slider-arrow

Pattern

Je choisis l’abonnement :
+ simple et
+ économique

Jusqu’à 15% de réduction permanente sur chaque produit sur lequel je m’abonne.

Je choisis l’abonnement :
+ simple et
+ économique

Jusqu’à 15% de réduction permanente sur chaque produit sur lequel je m’abonne.