Alerts
Alerts are used to attract user's attention for important information without interrupting the user's flow.
Example of Alert Bar without close button
Alerts are available in 5 types- success alert, error alert, warning alert, primary alert, secondary alert. To use this alert just use class name alert-box and also add class according to alert type- alert-primary, alert-secondary, alert-danger, alert-success, alert-warning. (e.g.class="alert-box alert-primary"). You can copy html part from below code snippet.
Avatar
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.
Example of Image Avatar
Avatar is available in 4 different sizes. You can use image in Avatar. You need to include class avatar and for size add class according to size avatar-lg-size, avatar-md-size, avatar-sm-size, avatar-xs-size (e.g. class="avatar avatar-lg-size") Don't forget to add Responsive Image class names for img element.
Example of Text Avatar
You can use initial letters of user in Avatar as well. You need to include class avatar-text along with avatar and size class. (e.g. avatar avatar-lg-size avatar-text avatar-text")
Badges
Badges are being used to display a notification count or status information
Example of Status Badge on Avatar
We have 3 types of status badges that can be integrated with Avatars. You can use class badge badge-online to show the online status of the user and badge badge-offline to show the offline status of the user and badge badge-away to show that user is away. You can also use badge number-badge to show numbers on the badge.Check code below to copy the html part as is.
Example of Badge on Icons
We have 2 types of badges on icons one with number and one without number. Check code below to copy the html part as is.
24+
24+
24+
Example of Badge on text
We have multiple sizes of text-badges for using these you can use text-badge-large, text-badge-medium-large, text-badge-medium, text-badge-small, text-badge-medium-very-small classes.
Example of large text badge New
Example of medium large text badge New
Example of medium text badge New
Example of small text badge New
Example of very small text badge New
Buttons
Buttons are also called as call to action. We have range of buttons and their states. You may use a tag or button element, you need to add respective classes, and you are good to go.
Example of Solid Buttons
For using solid button you can use classes button-primary, button-secondary, button-success, button-warning, button-danger, link-primary.
Example of Outline Buttons
For using outline button you can use classes button-outline-primary, button-outline-secondary, button-outline-success, button-outline-warning, button-outline-danger.
Example of Buttons with icons and floating button
For using icons with button just put the icon inside the button and for using floating button we can use button-lg-floating for large floating button and button-md-floating for medium floating button
Cards
Cards are used to show the data which is related.
Example of Horizontal Card- Text+Image
Atomic habits
Book for building habits
Sold by bookstore
White and blue printed playsuit with knot detail, has a shirt collar, sleeveless, button closures
₹200 ₹300 11 % off
Example of Vertical Card- Text+Image
Atomic habits
Book for building habits
Sold by bookstore
White and blue printed playsuit with knot detail, has a shirt collar, sleeveless, button closures
₹200 ₹300 11 % off
Atomic habits
Book for building habits
Sold by bookstore
White and blue printed playsuit with knot detail, has a shirt collar, sleeveless, button closures
₹200 ₹300 11 % off
Example of Card With Text Overlay
Atomic habits
Book for building habits
Sold by bookstore
White and blue printed playsuit with knot detail, has a shirt collar, sleeveless, button closures
Images
Using our library you can easily make your images responsive. Here all the images will be fitted to it's parent width.
Example of Responsive Image
For using responsive image you can use class img-responsive this would fit the image to the width of it's parent container.
Example of Round Image
For using round images you have to give equal width and height to parent container and than you can use class img-round and img-responsive for making the image round.
Inputs
Inputs are used for taking some important information from the user so that we can use that information for user benefit.
Example of Floating Inputs
For using inputs you can use the following html, and the label would go up when you type something.
Javascript
Example of Simple Inputs
Example of Inputs with Validation
We have 3 types of validation with inputs error, warn, success
Typography
The below text utilitites can be used to make your project look awesome.
Example of Heading Text
For using responsive image you can use class img-responsive this would fit the image to the width of the container.
Example of Other Text Styles
Example of very large text
Example of large text
Example of medium large text
Example of medium text
Example of small text
Example of very small text
Example of text with primary color
Example of text with secondary color
Example of strike through text
Example of centered text
Example of large text with normal weight
Example of large text with semi-bold weight
Lists
Lists are used in various places such as navigation bar, article page etc.
Example of Unordered Lists
We have 4 types of lists the default one than the list with circular bullets, list with square bullets and list with no bullets.
- Item-1
- Item-2
- Item-3
- Item-1
- Item-2
- Item-3
- Item-1
- Item-2
- Item-3
- Item-1
- Item-2
- Item-3
Example of Ordered Lists
We have 4 types of lists the default one than the list with circular bullets, list with square bullets and list with no bullets.
- List item with numbers
- List item with numbers
- List item with numbers
- List item with numbers
- List item with numbers
- List item with numbers
- List item with lower alphabets
- List item with lower alphabets
- List item with lower alphabets
- List item with upper alphabets
- List item with upper alphabets
- List item with upper alphabets
- List item with lower roman
- List item with lower roman
- List item with lower roman
- List item with upper roman
- List item with upper roman
- List item with upper roman
Example of Inline Lists
- Inline List
- Inline List
- Inline List
Modal
Modals are used to show some important information to the user and they are closed only when the user selects some option.
Example of Modal
Toast
Toasts are used to show pop up messages to the user. We have 3 types of toasts, success toast, warning toast, error toast. For using these toast use classes toast toast-success. For positioning of the toast we have 3 classes bottom-center which would position toast in center, bottom-left which would position toast in left, bottom-right which would position toast in right.
Example of Toasts
Simplified Grid
If you want to divide the page into parts grid comes very handy.
Example of Simplified 50-50 Grid
Atomic habits
Book for building habits
Sold by bookstore
White and blue printed playsuit with knot detail, has a shirt collar, sleeveless, button closures
Example of Simplified 70-30 Grid
Example of Simplified 30-70 Grid
Example of 3 items in a Grid
Rating Bar
It is used to take the user feedback on the product
Example of Rating-Bar
Javascript
Slider
Slider or Range are used for selecting the range. Like range of sound in video apps, range of price in e-commerce apps etc. For using slider just copy our html and replace the icon by your required one.
Example of Slider with icon
Forms
Forms are used to take the information from the user.
Example of Forms