Global

Couleurs
white
black
raisin-black
philippine-gray
bright-gray
anti-flash-white
Headings

Titre h1

Titre h2

Titre h3

Titre h4

Titre h5
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
<button class="button button--primary"><span>Découvrir</span></button>
<button class="button button--secondary"><span>Découvrir</span></button>
<button class="button button--alt"><span>Découvrir</span></button>
<button class="button button--filter button--alt"><span>Découvrir</span></button>
<button class="button button--primary button--l"><span>Découvrir</span></button>
<button class="button button--loading"><span>Découvrir</span></button>
<button class="button button--primary" disabled><span>Découvrir</span></button>
<button class="button button--primary"><svg class="icon icon--s"><use xlink:href="#icon-eye" /></svg><span>Découvrir</span></button>
<button class="button button--primary button--add-to-cart has-icon checked"><svg class="icon icon--s"><use xlink:href="#icon-check" /></svg><span>Ajouter au panier</span></button>
Icons

Default are feather icons.


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

activity
activity
airplay
airplay
alert-circle
alert-circle
alert-octagon
alert-octagon
alert-triangle
alert-triangle
align-center
align-center
align-justify
align-justify
align-left
align-left
align-right
align-right
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 arrow-down

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
Products

Countdown
clock

Dependencies :

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

Product card
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel
Prix habituel 19,99 €
Prix soldé 19,99 € Prix habituel