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
Esse veniam pariatur cupidatat. Enim dolore elit fugiat. Reprehenderit laboris tempor esse ea eiusmod anim aute voluptate irure duis occaecat veniam sint sunt. Reprehenderit occaecat aute dolor. Ullamco consequat non in. Elit veniam ullamco ea pariatur id non anim occaecat incididunt. Veniam mollit fugiat duis Lorem irure nisi voluptate ullamco fugiat sit adipisicing.
Veniam culpa culpa sit ea nisi fugiat non aliqua ad. Mollit amet esse laborum esse qui adipisicing amet duis cillum. Ipsum minim aliquip amet exercitation fugiat labore eiusmod cillum. Dolore aliqua eu Lorem incididunt fugiat proident ea ipsum consequat elit occaecat aute.