Styleboard
Typography
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo libero, fugit, cum hic, ipsa nam quisquam iusto doloremque porro in mollitia laudantium sapiente? Inventore deserunt voluptate possimus, temporibus blanditiis, consequatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id minus suscipit quidem libero. Provident soluta nihil, tempora consequatur quis dolores nemo cum dicta non modi, odio exercitationem, aspernatur cumque minus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque quibusdam aliquam temporibus soluta, quia, necessitatibus laboriosam accusantium minima animi ea blanditiis cum explicabo quam eum, dolorem perferendis nisi? Ducimus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores temporibus suscipit sapiente debitis, laudantium soluta, explicabo hic id placeat. Fugiat laudantium alias molestias in ipsum dolorum facilis, nihil possimus.
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
Icons
| Icon | Code |
|---|---|
| <span class="icon-logo"></span> | |
| <span class="icon-arrow-right"></span> | |
| <span class="icon-arrow-down"></span> | |
| <span class="icon-arrow-up"></span> | |
| <span class="icon-close"></span> | |
| <span class="icon-verified"></span> | |
| <span class="icon-search"></span> | |
| <span class="icon-search-zoom"></span> | |
| <span class="icon-heart"></span> | |
| <span class="icon-chat"></span> | |
| <span class="icon-cart"></span> | |
| <span class="icon-phone"></span> | |
| <span class="icon-mail"></span> | |
| <span class="icon-paypal"></span> | |
| <span class="icon-card"></span> | |
| <span class="icon-user"></span> | |
| <span class="icon-lock"></span> | |
| <span class="icon-cat"></span> | |
| <span class="icon-cat-square"></span> | |
| <span class="icon-dog"></span> | |
| <span class="icon-dog-square"></span> | |
| <span class="icon-facebook"></span> | |
| <span class="icon-twitter"></span> | |
| <span class="icon-instagram"></span> | |
| <span class="icon-plus"><span class="path1"></span><span class="path2"></span></span> | |
| <span class="icon-minus"><span class="path1"></span><span class="path2"></span></span> |
Buttons
| Button | Code | Description |
|---|---|---|
| Link button | <a href="#" class="action primary">Link button</a> | Link as a button |
| Link button | <a href="#" class="action primary active">Link button</a> | Link as a button (active) |
| Link button | <a href="#" class="action primary invert">Link button</a> | Link as a button (inverted) |
| Link button | <a href="#" class="action primary active invert">Link button</a> | Link as button (active, inverted) |
| <button>Button</button> | Button (default) | |
| <button class="invert">Button inverted</button> | Button (default, inverted) |