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 | 80px | 300 | Panton, sans-serif | display-1 |
| Display 2 | 72px | 300 | Panton, sans-serif | display-2 |
| Display 3 | 64px | 300 | Panton, sans-serif | display-3 |
| Display 4 | 56px | 300 | Panton, sans-serif | display-4 |
| Display 5 | 48px | 300 | Panton, sans-serif | display-5 |
| Display 6 | 40px | 300 | Panton, sans-serif | display-6 |
| Heading 1 | 60px | 500 | Panton, sans-serif | h1 |
| Heading 2 | 40px | 500 | Panton, sans-serif | h2 |
| Heading 3 | 30px | 500 | Panton, sans-serif | h3 |
| Heading 4 | 26px | 500 | Panton, sans-serif | h4 |
| Heading 5 | 22px | 500 | Panton, sans-serif | h5 |
| Heading 6 | 16px | 500 | Panton, sans-serif | h6 |
| Bold text | 16px | 700 | Panton, sans-serif | fw-bold |
| Normal text | 16px | 400 | Panton, sans-serif | fw-normal |
| Semibold text | 16px | 600 | Panton, sans-serif | fw-semi-bold |
| Small text | 14px | 400 | Panton, sans-serif | small |
| Extra small text | 12px | 400 | Panton, sans-serif | extra-small |
| Link | 16px | 400 | Panton, 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: 41)
bullet
quote
piggy-bank
info
hidden
visible
facebook
youtube
twitter
download
drop
drop-full
email
exit
filter
drop-half
large-arrow-left
large-arrow-right
menu
minus
plus
privacy
profile
return
search
small-arrow-down
small-arrow-left
small-arrow-right
small-arrow-up
subscribe
wishlist
wishlist-full
attachment
cart
coupon
credit-card
customer
delete
trash
delivery
discount
bullet
quote
piggy-bank
info
hidden
visible
facebook
youtube
twitter
download
drop
drop-full
email
exit
filter
drop-half
large-arrow-left
large-arrow-right
menu
minus
plus
privacy
profile
return
search
small-arrow-down
small-arrow-left
small-arrow-right
small-arrow-up
subscribe
wishlist
wishlist-full
attachment
cart
coupon
credit-card
customer
delete
trash
delivery
discount
Spacing
px-0
px-1
px-2
px-3
px-4
px-5
Colors
primary
#0045FF
rgb(0, 69, 255)
#0045FF
rgb(0, 69, 255)
secondary
#00D8B4
rgb(0, 216, 180)
#00D8B4
rgb(0, 216, 180)
promo
#E30F39
rgb(227, 15, 57)
#E30F39
rgb(227, 15, 57)
yellow
#FFB116
rgb(255, 177, 22)
#FFB116
rgb(255, 177, 22)
violet
#7F49DB
rgb(127, 73, 219)
#7F49DB
rgb(127, 73, 219)
violet-light
#E2DBEE
rgb(226, 219, 238)
#E2DBEE
rgb(226, 219, 238)
blue
#001689
rgb(0, 22, 137)
#001689
rgb(0, 22, 137)
blue-light
#0045FF
rgb(0, 69, 255)
#0045FF
rgb(0, 69, 255)
green
#7ABC10
rgb(122, 188, 16)
#7ABC10
rgb(122, 188, 16)
gray-100
#F5F5F5
rgb(245, 245, 245)
#F5F5F5
rgb(245, 245, 245)
gray-200
#E0E0E0
rgb(224, 224, 224)
#E0E0E0
rgb(224, 224, 224)
gray-300
#B5B5B5
rgb(181, 181, 181)
#B5B5B5
rgb(181, 181, 181)
gray-400
#787878
rgb(120, 120, 120)
#787878
rgb(120, 120, 120)
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
Ullamco excepteur nisi ex incididunt est pariatur anim officia consectetur. Consequat anim cupidatat tempor consectetur. Veniam amet officia ad nulla tempor amet fugiat labore proident consequat deserunt sunt do. Fugiat labore aliqua eiusmod irure laboris qui est aliqua do labore deserunt dolore. Reprehenderit dolore nisi nulla cillum laboris sunt fugiat id laboris dolor Lorem. Sunt adipisicing irure et. Adipisicing officia est dolor laboris irure. Et qui ea eiusmod anim nulla duis minim.
Voluptate anim velit voluptate laborum. Dolore eiusmod adipisicing quis occaecat sunt sit labore id ea ipsum ex quis quis dolor Lorem. Irure magna est ut anim dolor ullamco eiusmod. Eu amet irure pariatur ea officia incididunt esse pariatur ullamco ullamco commodo. Pariatur consequat tempor ea fugiat officia dolor laborum. Sint Lorem dolore magna minim ullamco.