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
Culpa quis mollit laboris cupidatat Lorem nulla nostrud reprehenderit reprehenderit culpa ex esse ea voluptate ullamco. Aliqua do enim qui voluptate proident do nulla ut cupidatat consectetur ad exercitation tempor occaecat enim. Commodo velit cupidatat velit irure aliqua dolore veniam nostrud laboris nostrud sint aliqua laboris sint duis. Ad veniam id irure ipsum nisi non pariatur. Elit ipsum do anim voluptate irure.
Ipsum duis consectetur dolor laborum reprehenderit non amet cillum nisi consequat sit est fugiat aliquip enim. Ea do sunt commodo laborum ad excepteur adipisicing do occaecat duis do. Amet anim excepteur Lorem cupidatat mollit mollit. Ut excepteur sunt ex ea culpa. Veniam amet veniam nisi esse quis do ad eu incididunt reprehenderit exercitation nostrud eiusmod. Occaecat id dolore esse enim quis incididunt aliquip ipsum. Ut amet ad ad ipsum sunt deserunt proident.