Dark mode
{% render 'dark-mode-toggle' %}
Grille desktop
Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12
Typography
A
a
A
a
A
a
A
a
Messina Sans
A
a
A
a
A
a
A
a
Mendl Serif
Lorem ipsum dolor sit amet.
.t-title
Lorem ipsum dolor sit amet.
.t-title--md
Lorem ipsum dolor sit amet.
.t-text
Lorem ipsum dolor sit amet.
.t-text--xs
Lorem ipsum dolor sit amet.
.t-text--md
Lorem ipsum dolor sit amet.
.t-text--lg
Colors
dark-mode
black
dark
dark-purple
grey-dark
grey
grey-light
kaki
red-dark
red
red-light
beige-dark
beige
beige-light
light-mode
white
white-50
green
Boutons
Exemples d'utilisation du CTA
Boutons simples
{% render 'cta', label: text_trad, attr: 'data-sidebar-open="cart"' %}
{% render 'cta', label: 'Plain', model: 'plain' %}
{% render 'cta', label: 'Plain Beige', model: 'plain-beige' %}
{% render 'cta', label: 'Plain', model: 'plain', size: 'sm' %}
Différentes tailles
{% render 'cta', label: 'Small', size: 'sm' %}
{% render 'cta', label: 'Large' %}
{% render 'cta', label: 'Large' %}
Avec icônes
{% render 'cta', label: 'Rechercher', icon: 'search' %}
{% render 'cta',
label: 'Voir plus',
icon: 'arrow',
model: 'plain',
class: 'animate'
%}
États spéciaux
{% render 'cta', label: 'Désactivé', disabled: true %}
{% render 'cta',
label: 'Plein largeur',
class: 'u-w-full u-text-center'
%}
Pour slider
{% render 'cta',
label: '',
icon: 'arrow-right',
model: 'plain',
class: 'animate u-w-fit'
%}
{% render 'cta',
label: '',
icon: 'arrow',
model: 'arrow-x',
class: 'animate u-w-fit'
%}
{% render 'cta',
label: '',
icon: 'arrow',
model: 'arrow-ghost',
class: 'animate u-w-fit'
%}
{% render 'cta',
label: '',
icon: 'arrow-left',
model: 'arrow-dark',
class: 'animate u-w-fit'
%}
ETC... voir le fichier snippets/common/cta.liquid pour les différents modèles et tailles
Links
Version par défaut (animation depuis la droite)
t-link
.t-link
t-link--lg
.t-link.t-link--lg
t-link--inverted
.t-link.t-link--inverted
t-link--inverted-lg
.t-link.t-link--inverted-lg
t-link--left-lg
.t-link.t-link--left-lg
t-link--left-inverted
.t-link.t-link--left-inverted
Version right (animation depuis la gauche)
t-link--right
.t-link.t-link--right
t-link--right-lg
.t-link.t-link--right-lg
t-link--right-inverted
.t-link.t-link--right-inverted
Version center (animation centrée avec deux lignes)
t-link--center
.t-link.t-link--center
Icons
arrow
arrow-right
arrow-left
small-arrow-right
small-arrow-left
sound-on
sound-off
play
pause
burger
search
user
cart
eye
close
facebook
instagram
youtube
tiktok
twitter
pinterest