Styleguide
Links
-
Voilà un lien qui est dans un richtext
.richtext (on parentNode) -
t-link
.t-link -
t-link t-link--inverted
.t-link .t-link--inverted
Fonts
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-font-gilmer -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-font-integral -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-font-boska
Fonts size
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-10-14 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-12-14 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-12-16 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-14-16 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-16-18 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-16-24 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-18-20 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-18-22 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-18-24 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-18-26 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-20-24 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-20-26 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-24-26 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-24-32 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-28-32 -
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.u-text-32-34 -
Lorem ipsum dolor sit amet
.u-text-36-34 -
Lorem ipsum dolor sit amet
.u-text-40-40 -
Lorem ipsum dolor sit amet
.u-text-48-44 -
Lorem ipsum dolor sit amet
.u-text-48-48 -
Lorem ipsum dolor sit amet
.u-text-56-64
Couleurs
-
rgb(var(--grey))
.u-bg-grey -
rgb(var(--dark-grey))
.u-bg-dark-grey -
rgb(var(--grey-pink))
.u-bg-grey-pink -
rgb(var(--light-purple))
.u-bg-light-purple -
rgb(var(--purple))
.u-bg-purple -
rgb(var(--black))
.u-bg-black -
rgb(var(--red))
.u-bg-red -
rgb(var(--green))
.u-bg-green
Icons
-
render 'icons', name: 'left' -
render 'icons', name: 'right' -
render 'icons', name: 'top' -
render 'icons', name: 'bottom' -
render 'icons', name: 'arrow-right' -
render 'icons', name: 'search' -
render 'icons', name: 'close' -
render 'icons', name: 'close-circle' -
render 'icons', name: 'menu' -
render 'icons', name: 'storelocator' -
render 'icons', name: 'heart' -
render 'icons', name: 'user' -
render 'icons', name: 'cart' -
render 'icons', name: 'lang' -
render 'icons', name: 'grid3' -
render 'icons', name: 'grid4'
Buttons
-
.t-button .t-button--primary -
.t-button .t-button--secondary -
.t-button .t-button--outline -
.t-button .t-button--primary t-button--small -
.t-button .t-button--secondary t-button--small -
.t-button .t-button--outline t-button--small -
.t-button t-button--secondary t-button--icon -
.t-button t-button--secondary t-button--small t-button--icon -
.t-button t-button--primary t-button--icon -
.t-button t-button--primary t-button--icon t-button--icon-swipe
Checkbox
-
.t-checkbox -
.t-checkbox -
.t-checkbox -
.t-checkbox
