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
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 | 40px | 300 | europa, sans-serif | display-1 |
| Heading 1 | 32px | 400 | europa, sans-serif | h1 |
| Heading 2 | 26px | 400 | europa, sans-serif | h2 |
| Heading 3 | 24px | 400 | europa, sans-serif | h3 |
| Heading 4 | 20px | 400 | europa, sans-serif | h4 |
| Heading 5 | 18px | 400 | europa, sans-serif | h5 |
| Heading 6 | 16px | 400 | europa, sans-serif | h6 |
| Bold text | 16px | 700 | europa, sans-serif | fw-bold |
| Normal text | 16px | 400 | europa, sans-serif | fw-normal |
| Light text | 16px | 300 | europa, sans-serif | fw-light |
| Small text | 14px | 400 | europa, sans-serif | small |
| Extra small text | 12px | 400 | europa, sans-serif | extra-small |
| Link | 16px | 400 | europa, 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: 35)
play
plus
minus
language
calendar
cart
close
coupon
credit-card
download
error
filter
hidden
info
instagram
light-arrow-left
light-arrow-right
linkedin
logout
menu
order
privacy
settings
shipping
social-facebook
tiktok
visible
wishlist-full
wishlist
youtube
account
account-logged-in
arrow-down
arrow-up
assistance
play
plus
minus
language
calendar
cart
close
coupon
credit-card
download
error
filter
hidden
info
instagram
light-arrow-left
light-arrow-right
linkedin
logout
menu
order
privacy
settings
shipping
social-facebook
tiktok
visible
wishlist-full
wishlist
youtube
account
account-logged-in
arrow-down
arrow-up
assistance
Spacing
px-0
px-1
px-2
px-3
px-4
px-5
Colors
primary
#0F0F0F
rgb(15, 15, 15)
#0F0F0F
rgb(15, 15, 15)
secondary
#FFFFFF
rgb(255, 255, 255)
#FFFFFF
rgb(255, 255, 255)
green
#2F372C
rgb(47, 55, 44)
#2F372C
rgb(47, 55, 44)
red
#CA1C00
rgb(202, 28, 0)
#CA1C00
rgb(202, 28, 0)
Grayscale
white
#FFFFFF
rgb(255, 255, 255)
#FFFFFF
rgb(255, 255, 255)
light
#F8F8F8
rgb(248, 248, 248)
#F8F8F8
rgb(248, 248, 248)
gray-100
#F8F8F8
rgb(248, 248, 248)
#F8F8F8
rgb(248, 248, 248)
gray-200
#F0F0F0
rgb(240, 240, 240)
#F0F0F0
rgb(240, 240, 240)
gray-300
#E6E6E6
rgb(230, 230, 230)
#E6E6E6
rgb(230, 230, 230)
gray-400
#C7C7C7
rgb(199, 199, 199)
#C7C7C7
rgb(199, 199, 199)
gray-500
#B4B4B4
rgb(180, 180, 180)
#B4B4B4
rgb(180, 180, 180)
gray-600
#737373
rgb(115, 115, 115)
#737373
rgb(115, 115, 115)
dark
#0F0F0F
rgb(15, 15, 15)
#0F0F0F
rgb(15, 15, 15)
black
#0F0F0F
rgb(15, 15, 15)
#0F0F0F
rgb(15, 15, 15)
Form
Buttons
Dropdowns
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
Veniam ex consectetur magna enim reprehenderit anim et irure officia ad nostrud eiusmod minim. Officia sint exercitation sint sint sunt non dolor commodo. Cupidatat aliquip do aliquip sit aliqua laboris consectetur irure est fugiat elit veniam adipisicing non labore. Aliquip et sint amet dolor. Culpa excepteur nulla do non.
Nisi ipsum labore nisi incididunt laboris laboris culpa dolor. Amet exercitation cillum voluptate esse nisi voluptate excepteur sunt aliquip pariatur duis. Officia tempor tempor quis ipsum ullamco duis. Ullamco nulla tempor labore cupidatat deserunt magna. Ea labore id elit duis in dolore elit reprehenderit ut deserunt eiusmod ipsum sint. Laborum fugiat adipisicing adipisicing adipisicing occaecat adipisicing culpa eiusmod ut id sunt aute. In occaecat exercitation eiusmod adipisicing et nostrud dolor occaecat qui pariatur ullamco aliqua ullamco mollit deserunt. Nostrud ullamco non eu sit ut sunt proident aliquip laboris proident aute non ullamco non.
