Global

Couleurs
nero - #343030
milly-green - #3BD12C
dusty-gray - #818181
dark-gray - #434241
gallery - #F0F0F0
silk - #F9F6F1
mercury - #mercury
white - #FFF
black - #000
error - #FF8B8B
success - #3BD12C
Headings

Titre h1 - || Typo Alliance

Titre h2 - || Typo Alliance

Titre h3 - || Typo Alliance

Titre h4 - || Typo Alliance

Titre h5 - || Typo Source Code Pro

Titre h1 italic - || Typo Alliance

Titre h2 italic - || Typo Alliance

Titre h3 italic - || Typo Alliance

Titre h4 italic - || Typo Alliance

Titre h5 italic - || Typo Source Code Pro
Texts

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

Espaces
xs
s
m
l
xl
2xl
3xl
4xl
Buttons

Icons

Default are feather icons.


{% render 'icon', icon: 'id' %}

Icons site

eye

search

account-idle

mail

chat

trash-2

help-circle

alert-circle

refresh-cw
Reassurance Icons

validated-label

hand-stitched

factory

spool-thread

Eclat
Eclats Indisponible
Promotion -20%
Messages d'erreurs
Phrase + picto encadré
Aucun résultat n'a été trouvé
Phrase + picto
Aucun résultat n'a été trouvé
Phrase
Aucun résultat n'a été trouvé
Gellule
Dernières pièces
Gellule + Picto
Dernières pièces
Interactives components

Drawer
Very basic Drawer

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

 {% render 'drawer', opener: '.js-open-basic-drawer', title: 'Very basic Drawer', content_html:lorem %}


Mobile only Drawer

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

 {% render 'drawer', opener: '.js-open-mobile-open-drawer', mobile_only: true, title: 'Mobile only Drawer', content_html:lorem %}


Large Drawer

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

 {% render 'drawer', opener: '.js-open-large-drawer', class: 'drawer--large', title: 'Large Drawer', content_html:lorem %}


Large Drawer
{% render 'drawer', opener: '.js-open-fetch-drawer', content_handle: 'politique-de-confidentialite', title: 'Large Drawer' %}


Dependencies :

  • 🟢​​ㅤLiquid to include
  • 🔴​​ㅤCSS should be in common.css
  • 🟡ㅤJS to include in theme.liquid

<script src="{{ 'component-drawer.js' | asset_url }}" defer="defer" type="module"></script>
Tabs
Content tab 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?
Dependencies :

  • 🟢​​ㅤLiquid to include
  • 🟡ㅤJS to include where Tabs component is used

<script src="{{ 'component-tabs.js' | asset_url }}" defer="defer" type="module"></script>

Accordions
Accordion title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio, officia. Eligendi est veniam consequatur dolor placeat exercitationem? Aspernatur atque sequi unde sapiente? Saepe quod rerum in fugiat repellat. Inventore, blanditiis?

Dependencies :

  • 🟢​​ㅤLiquid to include
  • 🔴​​ㅤCSS to include
<link rel="stylesheet" href="{{ 'component-accordion.css' | asset_url }}" media="print" onload="this.media='all'">


Back To Top

👀 check it out in action.


Dependencies :

  • 🟢​​ㅤLiquid to include in theme.liquid
  • 🔴​​ㅤCSS to include
  • 🟡ㅤJS to include

<script src="{{ 'component-back-to-top.js' | asset_url }}" defer="defer" type="module"></script>
<link rel="stylesheet" href="{{ 'component-back-to-top.css' | asset_url }}" media="print" onload="this.media='all'">
Links
Voir plus
Découvrir la collection
Products

Countdown

Dependencies :

  • 🟢​​ㅤLiquid to include
  • 🟡ㅤJS to include