Styleguide

COLORS

LeSilla white

Hex: #FFFFFF

.
tw-[object]-white

LeSilla black

Hex: #111111

.
tw-[object]-black

LeSilla blacklight

Hex: #2F2F2F

.
tw-[object]-blacklight

LeSilla darkgrey

Hex: #4B4B4B

.
tw-[object]-darkgrey

LeSilla grey

Hex: #A2A2A2

.
tw-[object]-grey

LeSilla softgrey

Hex: #CECECE

.
tw-[object]-softgrey

LeSilla lightgrey

Hex: #E6E6E6

.
tw-[object]-lightgrey

LeSilla whiteantiflash

Hex: #F6F6F6

.
tw-[object]-whiteantiflash

LeSilla error

Hex: #C11A30

.
tw-[object]-error

LeSilla success

Hex: #108041

.
tw-[object]-success

FONT HEADING: PRATA

FONT WEIGHT:

  • REGULAR: 400

XL-regular

Rem Size: 4rem

Example...
tw-lsl-heading-xl-regular

L-regular

Rem Size: 3rem

Example...
tw-lsl-heading-l-regular

M-regular

Rem Size: 2.4rem

Example...
tw-lsl-heading-m-regular

S-regular

Rem Size: 2rem

Example...
tw-lsl-heading-s-regular

XS-regular

Rem Size: 1.5rem

Example...
tw-lsl-heading-xs-regular

FONT BODY: LATO

FONT WEIGHT:

  • LIGHT: 300
  • REGULAR: 400
  • BOLD: 700

XL-regular

Rem Size: 2rem

Example...
tw-lsl-body-xl-regular

L-bold

Rem Size: 1.5rem

Example...
tw-lsl-body-l-bold

L-regular

Rem Size: 1.5rem

Example...
tw-lsl-body-l-regular

M-bold

Rem Size: 1.4rem

Example...
tw-lsl-body-m-bold

M-regular

Rem Size: 1.4rem

Example...
tw-lsl-body-m-regular

M-light

Rem Size: 1.4rem

Example...
tw-lsl-body-m-light

S-bold

Rem Size: 1.3rem

Example...
tw-lsl-body-s-bold

S-regular

Rem Size: 1.3rem

Example...
tw-lsl-body-s-regular

XS-regular

Rem Size: 1.2rem

Example...
tw-lsl-body-xs-regular

BUTTONS

generic icon button

generic icon a

find a store

tw-button-primary

Add to bag ( tag a )

tw-button-secondary

Add to bag ( tag a )

tw-button-primary disabled

Add to bag ( tag a )

tw-button-tertiary

BUTTON

A LINK

tw-content-facebook tw-content-instagram tw-content-youtube tw-content-whatsapp tw-content-twitter tw-content-pinterest tw-content-search tw-content-wishlist tw-content-wishlist-active tw-content-cart tw-content-user tw-content-edit tw-content-hamburger tw-content-close tw-content-plus tw-content-minus tw-content-arrow-down tw-content-arrow-up tw-content-arrow-left tw-content-arrow-right tw-content-info tw-content-special tw-content-gift tw-content-scissors tw-content-payment tw-content-localize tw-content-mail tw-content-message tw-content-call

tw-button-tertiary active (TO DO)

LINKS

tw-cta-menu

Add to bag

tw-cta-anchor

Add to bag

tw-cta-underline-s

Add to bag

tw-cta-underline-m

Add to bag

INPUT FIELD

tw-inputfield normal input


use passwordToggle.js

tw-input-password password input

CHECKBOX

Custom Checkbox BIG

Custom Checkbox SMALL

CHECKBOX

Custom Radio Button BIG

Custom Radio Button SMALL

PROD CARDS

PROVA con CQW che si adatta al contenuto

Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input
Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input
Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input
Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input

Liquid error (snippets/lsl-product-card line 78): invalid url input

INPUT FIELD

tw-inputfield normal input


use passwordToggle.js

tw-input-password password input

CHECKBOX

CHIPS COLLECTION

tw-chips-collection

ICONS

  • {%- render 'lsl-svg', icon:'facebook' -%}
  • {%- render 'lsl-svg', icon:'instagram' -%}
  • {%- render 'lsl-svg', icon:'youtube' -%}
  • {%- render 'lsl-svg', icon:'whatsapp' -%}
  • {%- render 'lsl-svg', icon:'twitter' -%}
  • {%- render 'lsl-svg', icon:'pinterest' -%}
  • {%- render 'lsl-svg', icon:'search' -%}
  • {%- render 'lsl-svg', icon:'wishlist' -%}
  • {%- render 'lsl-svg', icon:'wishlist-active' -%}
  • {%- render 'lsl-svg', icon:'cart' -%}
  • {%- render 'lsl-svg', icon:'user' -%}
  • {%- render 'lsl-svg', icon:'edit' -%}
  • {%- render 'lsl-svg', icon:'hamburger' -%}
  • {%- render 'lsl-svg', icon:'close' -%}
  • {%- render 'lsl-svg', icon:'plus' -%}
  • {%- render 'lsl-svg', icon:'minus' -%}
  • {%- render 'lsl-svg', icon:'arrow-down' -%}
  • {%- render 'lsl-svg', icon:'arrow-up' -%}
  • {%- render 'lsl-svg', icon:'arrow-left' -%}
  • {%- render 'lsl-svg', icon:'arrow-right' -%}
  • {%- render 'lsl-svg', icon:'info' -%}
  • {%- render 'lsl-svg', icon:'special' -%}
  • {%- render 'lsl-svg', icon:'gift' -%}
  • {%- render 'lsl-svg', icon:'scissors' -%}
  • {%- render 'lsl-svg', icon:'payment' -%}
  • {%- render 'lsl-svg', icon:'localize' -%}
  • {%- render 'lsl-svg', icon:'mail' -%}
  • {%- render 'lsl-svg', icon:'message' -%}
  • {%- render 'lsl-svg', icon:'call' -%}