Couleurs
#F5A290 (opacité 16%) - Blush 16
#F5A290 (opacité 8%) - Blush 16
#151515 (opacité 48%) - Overlay
#151515 (opacité 32%) - Mask 32
#151515 (opacité 24%) - Mask 24
#151515 (opacité 16%) - Mask 16
#151515 (opacité 8%) - Mask 8
Textes
Large Title Large Title (bold)
Title H1
Title H2
Title H3 Title H3 (bold)
Headline
body Body (bold) Body cap (bold)
Body S Body S cap Body S (bold)
Body S Cap (bold)
Body S (bold strike)
Callout
Subhead Subhead (strike)
Caption 1
Caption 2
Boutons
Bouton primary
Bouton secondary
Bouton tertiary
Espaces
Icons
Default are feather icons.
<![CDATA[{% render 'icon-iconoir', icon: 'id' %}]]>
Icons site
<![CDATA[activity]]>
<![CDATA[airplay]]>
<![CDATA[alert-circle]]>
<![CDATA[alert-octagon]]>
<![CDATA[alert-triangle]]>
<![CDATA[align-center]]>
<![CDATA[align-justify]]>
<![CDATA[align-left]]>
<![CDATA[align-right]]>
Reassurance Icons
Liquid error (sections/design-system line 717): Could not find asset snippets/reassurance-icon.liquid
<![CDATA[freeDelivery]]>
Liquid error (sections/design-system line 717): Could not find asset snippets/reassurance-icon.liquid
<![CDATA[securePayment]]>
Liquid error (sections/design-system line 717): Could not find asset snippets/reassurance-icon.liquid
<![CDATA[return]]>
Liquid error (sections/design-system line 717): Could not find asset snippets/reassurance-icon.liquid
<![CDATA[shipping]]>
Eclat
Eclats
Indisponible
Promotion
-20%
Eclats nouveautés
New
Eclats avec picto
Populaire
Messages d'erreurs
Phrase + picto encadré
Translation missing: fr.search.search.no_results
Phrase + picto
Translation missing: fr.search.search.no_results
Phrase
Translation missing: fr.search.search.no_results
Gellule
Translation missing: fr.product.last_products_in_stock
Gellule + Picto
Translation missing: fr.product.last_products_in_stock
Interactives components
Drawer
Liquid error (sections/design-system line 815): Could not find asset snippets/drawer.liquid
<![CDATA[{% render 'drawer', opener: '.js-open-basic-drawer', title: 'Very basic Drawer', content_html:lorem %}]]>
Liquid error (sections/design-system line 825): Could not find asset snippets/drawer.liquid
<![CDATA[{% render 'drawer', opener: '.js-open-mobile-open-drawer', mobile_only: true, title: 'Mobile only Drawer', content_html:lorem %}]]>
Liquid error (sections/design-system line 840): Could not find asset snippets/drawer.liquid
<![CDATA[{% render 'drawer', opener: '.js-open-large-drawer', class: 'drawer--large', title: 'Large Drawer', content_html:lorem %}]]>
Liquid error (sections/design-system line 855): Could not find asset snippets/drawer.liquid
<![CDATA[{% 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
Tabs
-
-
-
-
-
Dependencies :
- 🟢ㅤLiquid to include
- 🟡ㅤJS to include where Tabs component is used
Accordions
Dependencies :
- 🟢ㅤLiquid to include
- 🔴ㅤCSS to include
<![CDATA[<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
Links
Liquid error (sections/design-system line 982): Could not find asset snippets/breadcrumbs.liquid
Products
Countdown
Liquid error (sections/design-system line 997): Could not find asset snippets/product-countdown.liquid
Dependencies :
- 🟢ㅤLiquid to include
- 🟡ㅤJS to include
Product card
