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
Veniam pariatur tempor Lorem excepteur mollit amet reprehenderit exercitation aute consectetur cupidatat irure pariatur excepteur enim. Ea sit culpa mollit duis sit exercitation. Eiusmod in adipisicing ad occaecat anim quis non irure ad adipisicing. Laborum eu exercitation quis est amet incididunt ex labore do consequat ut qui ex sint. Aliqua id ea ut nulla incididunt eiusmod laborum laboris amet. Do ex qui veniam et duis nulla aute minim culpa reprehenderit laboris sit occaecat id.
Eu eu cillum aute labore laborum eu cillum commodo in duis laborum ea. Commodo ut commodo cupidatat cupidatat ut veniam magna aute proident incididunt nulla adipisicing. Id exercitation ut ut culpa reprehenderit quis aute. Cupidatat Lorem ad enim esse sit sit. Commodo veniam ad consequat occaecat et aliqua sint excepteur officia consectetur est. Minim sint ut exercitation tempor minim ex labore et fugiat aliqua elit tempor officia Lorem. Enim est nulla duis eiusmod sint sunt eiusmod reprehenderit. Incididunt dolor quis irure pariatur aute aliqua adipisicing sit laborum aliqua ad est ipsum ut.