Grid System
Breakpoint attuale: xssmmdlgxlxxl
1410 (12)
693 (6)
693 (6)
454 (4)
454 (4)
454 (4)
335 (3)
335 (3)
335 (3)
335 (3)
215 (2)
215 (2)
215 (2)
215 (2)
215 (2)
215 (2)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
96 (1)
1291 (11)
215 (2)
1171 (10)
335 (3)
1052 (9)
454 (4)
932 (8)
574 (5)
813 (7)
693 (6)
693 (6)
813 (7)
574 (5)
932 (8)
454 (4)
1052 (9)
335 (3)
1171 (10)
215 (2)
1291 (11)
96 (1)
Typography
| font-size | font-weight | font-family | classes | |
|---|---|---|---|---|
| Display 1 | 60px | 300 | "Neue Haas Grotesk Display", sans-serif | display-1 |
| Display 2 | 42px | 300 | "Neue Haas Grotesk Display", sans-serif | display-2 |
| Heading 1 | 32px | 400 | "Neue Haas Grotesk Text", sans-serif | h1 |
| Heading 2 | 26px | 400 | "Neue Haas Grotesk Text", sans-serif | h2 |
| Heading 3 | 22px | 400 | "Neue Haas Grotesk Text", sans-serif | h3 |
| Heading 4 | 20px | 400 | "Neue Haas Grotesk Text", sans-serif | h4 |
| Heading 5 | 18px | 400 | "Neue Haas Grotesk Text", sans-serif | h5 |
| Heading 6 | 16px | 400 | "Neue Haas Grotesk Text", sans-serif | h6 |
| Bold text | 16px | 700 | "Neue Haas Grotesk Text", sans-serif | fw-bold |
| Normal text | 16px | 400 | "Neue Haas Grotesk Text", sans-serif | fw-normal |
| Medium text | 16px | 500 | "Neue Haas Grotesk Text", sans-serif | fw-medium |
| Small text | 14px | 400 | "Neue Haas Grotesk Text", sans-serif | small |
| Extra small text | 12px | 400 | "Neue Haas Grotesk Text", sans-serif | extra-small |
| Link | 16px | 400 | "Neue Haas Grotesk Text", sans-serif |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Icons
(tot: 75)
mail
account-loyalty
share-loyalty
check
box-bianco
language
account
account-logged-in
alarm
arrow-down-bold
arrow-down-light
arrow-left-bold
arrow-left-light
arrow-right-bold
arrow-right-light
arrow-up-bold
arrow-up-light
bionike-star
calendar
card
close
coupon
coupon-b
delete
delivery
download
error
facebook-rounded
filter
filter-map
geolocator-map
gift-card
gift-sample
headphone
hidden
info
instagram
instagram-rounded
isenza
language
logout
menu
minus
navigator
one-column-display
order
phone
pin
pin-full
play-rounded
plus
privacy
promo
promo-box
search
senza-conservanti
senza-glutine
senza-nickel
senza-profumo
settings
sharing
shipping
shopping-cart
shopping-cart-full
sustainability
tik-tok-rounded
try-rounded
two-column-display
visible
voice-recorder
voice-recorder-on
wishlist
wishlist-full
youtube-rounded
about
mail
account-loyalty
share-loyalty
check
box-bianco
language
account
account-logged-in
alarm
arrow-down-bold
arrow-down-light
arrow-left-bold
arrow-left-light
arrow-right-bold
arrow-right-light
arrow-up-bold
arrow-up-light
bionike-star
calendar
card
close
coupon
coupon-b
delete
delivery
download
error
facebook-rounded
filter
filter-map
geolocator-map
gift-card
gift-sample
headphone
hidden
info
instagram
instagram-rounded
isenza
language
logout
menu
minus
navigator
one-column-display
order
phone
pin
pin-full
play-rounded
plus
privacy
promo
promo-box
search
senza-conservanti
senza-glutine
senza-nickel
senza-profumo
settings
sharing
shipping
shopping-cart
shopping-cart-full
sustainability
tik-tok-rounded
try-rounded
two-column-display
visible
voice-recorder
voice-recorder-on
wishlist
wishlist-full
youtube-rounded
about
Spacing
px-0
px-1
px-2
px-3
px-4
px-5
Colors
primary
#1A1718
rgb(26, 23, 24)
#1A1718
rgb(26, 23, 24)
nude
#E8CFC7
rgb(232, 207, 199)
#E8CFC7
rgb(232, 207, 199)
nude-100
#F1E5E1
rgb(241, 229, 225)
#F1E5E1
rgb(241, 229, 225)
nude-200
#EFDFDB
rgb(239, 223, 219)
#EFDFDB
rgb(239, 223, 219)
nude-300
#F7E5DF
rgb(247, 229, 223)
#F7E5DF
rgb(247, 229, 223)
white-nude
#F9F3F1
rgb(249, 243, 241)
#F9F3F1
rgb(249, 243, 241)
mint
#E2F4EC
rgb(226, 244, 236)
#E2F4EC
rgb(226, 244, 236)
red
#CA1C00
rgb(202, 28, 0)
#CA1C00
rgb(202, 28, 0)
orange
#C91C00
rgb(201, 28, 0)
#C91C00
rgb(201, 28, 0)
crab-apple
#8C3B2E
rgb(140, 59, 46)
#8C3B2E
rgb(140, 59, 46)
Grayscale
white
#FFFFFF
rgb(255, 255, 255)
#FFFFFF
rgb(255, 255, 255)
light
#FAFAFA
rgb(250, 250, 250)
#FAFAFA
rgb(250, 250, 250)
gray-100
#F6F6F6
rgb(246, 246, 246)
#F6F6F6
rgb(246, 246, 246)
gray-200
#E6E6E6
rgb(230, 230, 230)
#E6E6E6
rgb(230, 230, 230)
gray-300
#D7D7D7
rgb(215, 215, 215)
#D7D7D7
rgb(215, 215, 215)
gray-400
#B4B4B4
rgb(180, 180, 180)
#B4B4B4
rgb(180, 180, 180)
gray-500
#989898
rgb(152, 152, 152)
#989898
rgb(152, 152, 152)
dark
#1A1718
rgb(26, 23, 24)
#1A1718
rgb(26, 23, 24)
black
#000000
rgb(0, 0, 0)
#000000
rgb(0, 0, 0)
Form
Buttons
Dropdowns
Videos
Responsive
La larghezza si addatta al contenitore, l'altezza è libera e rispetta la proporzione del video.
bcom
YouTube
Vimeo
External
As background
Il video verrà croppato per copire il contenitore, che può avere qualsiasi dimensione (simula l'object-fit per le immagini).
bcom
YouTube
Non supportato
Non potendo nascondere i controlli, questi verrebbero croppati male.Vimeo
External
Table
| th1 | th2 | th3 | th4 | th5 | th6 | th7 | th8 | th9 | th10 |
|---|---|---|---|---|---|---|---|---|---|
| tr1 td1 | tr1 td2 | tr1 td3 | tr1 td4 | tr1 td5 | tr1 td6 | tr1 td7 | tr1 td8 | tr1 td9 | tr1 td10 |
| tr2 td1 | tr2 td2 | tr2 td3 | tr2 td4 | tr2 td5 | tr2 td6 | tr2 td7 | tr2 td8 | tr2 td9 | tr2 td10 |
| tr3 td1 | tr3 td2 | tr3 td3 | tr3 td4 | tr3 td5 | tr3 td6 | tr3 td7 | tr3 td8 | tr3 td9 | tr3 td10 |
| tr4 td1 | tr4 td2 | tr4 td3 | tr4 td4 | tr4 td5 | tr4 td6 | tr4 td7 | tr4 td8 | tr4 td9 | tr4 td10 |
| tr5 td1 | tr5 td2 | tr5 td3 | tr5 td4 | tr5 td5 | tr5 td6 | tr5 td7 | tr5 td8 | tr5 td9 | tr5 td10 |
Tabs
Accordion
Exercitation proident reprehenderit et Lorem aliquip nisi reprehenderit laboris proident esse ut in qui labore incididunt. Anim dolore id laboris. Occaecat culpa proident aute irure et id voluptate elit nostrud reprehenderit incididunt labore quis proident. Magna veniam tempor laboris sunt nulla eiusmod eu proident. Aute adipisicing incididunt et non aute sunt reprehenderit veniam ut. Velit elit ex sunt tempor aliqua Lorem consequat sit qui tempor qui pariatur fugiat ipsum. Aute nostrud pariatur exercitation commodo sint dolore in labore incididunt commodo proident consectetur et quis consectetur.
Veniam aliqua deserunt culpa ex in ad qui in sunt ea irure tempor nostrud non Lorem. Cillum consequat minim exercitation aliquip duis reprehenderit id et laborum velit adipisicing incididunt dolor. Ipsum adipisicing elit quis deserunt irure sunt dolor do dolor minim cillum. Esse nisi ex cupidatat nostrud incididunt quis culpa Lorem officia ea amet dolore. Occaecat deserunt anim est consectetur pariatur officia officia magna magna irure consectetur voluptate deserunt. Aute ex nulla tempor voluptate reprehenderit sunt amet quis ad ut elit adipisicing. Esse commodo eu dolore ullamco labore tempor id duis do et reprehenderit. Lorem nisi nulla aliqua officia ipsum amet culpa eiusmod deserunt anim.
Modals
Different sizes
Fullscreen
Other options
Offcanvas
Different positions
Other options
Pagination
Product Tiles
Ordinamento prodotti
Image from Content
Image from Bcom
