Usage
Copy-paste the stylesheet link into your head tag before all other stylesheets to load our CSS.
Alert
Provide contextual feedback messages for typical user actions.
Examples
Alerts are available in four classes - alert-success, alert-warning, alert-danger & alert-primary.
Avatar
Show display picture of a user.
Examples of Image Avatar
Avatars are available for 4 different sizes, having class name avatar-lg, avatar-md, avatar-sm & avatar-xs.
Examples of Text Avatar
Text Avatars can be made by adding class name avatar-text.
Badge
Component to display count or label.
Examples
Two types of status badges are available - status-online & status-offline. For displaying notification count badge-number can be used.
Button
Different styles of buttons of CTA & secondary colors.
Examples of CTA buttons
Primary buttons are used to attract user. Use the below classes for the type of button you want.
Examples of secondary buttons
Secondary buttons are used where user's attention is not required much. Use the below classes for the type of button you want.
Card
Cards are used to display content inside a container. Different styles of card variants are available.
Example of vertical card
Vertical cards are used to display product data on websites.
Camera
Rs. 20,000Example of vertical card with badge
Cards with badges are used to attract user.
Camera
Rs. 20,000Example of vertical card with text overlay
Text overlay is used to show text on top of cards.
Camera
Rs. 20,000Example of horizontal card of medium size
Horizontal cards are also used in websites to display product data in a horizontal manner.
Example of horizontal card of large size
This is a variation of horizontal card and can be used according to requirement.
Camera
Rs. 20,000 50% offExample of text card
Text card i used to display textual information to the user. It comes with a dismiss button.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet nisl. Sed adipiscing diam donec adipiscing tristique risus. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Neque gravida in fermentum et sollicitudin ac orci
Form
Forms are used to collect user information.
Example of Login form
Various fields are listed that are required in a login form.
Grid
Grids are used for creating columns & rows.
Example of Grid-2
Two column grid with 1fr width.
Buy Cameras
Upto 50% off
Example of Grid-3
Three column grid with 1fr width.
Nikon DSLR Camera
50% off
Image
Images classes are available to make your images responsive or round shaped.
Example of responsive image
Give a fixed width to img-wrapper for the size of image you want. Use img-responsive to make the image responsive.
Example of round image
Give width & height to img-round-sizing & add img-round to get a round image.
Input
Different types of input fields are available.
Example of inputs
Inputs of type text, radio & checkbox are available. Text input has a class input-error to depict error in inputs.
List
Displaying a series of content.
Example of spaced lists
Spaced lists are available with class list. Use list-inline for horizontal list.
- list item
- list item
- list item
- list item
- list item
- list item
Example of notification list
Notification list is used in social media apps. It can be customised according to requirement.
-
- username
- notification message
- date
-
- username
- notification message
- date
-
- username
- notification message
- date
Modal
Modals are used to show important information to user by positioning over everything else on the document.
Example of Modal
Rating
Ratings are used for reviews.
Example of Rating
The rating 5 stars can be used for asking reviews or for display purpose also. The rating pill can be used as badges at different places to attract user.
Slider
Slider is used for a range of input.
Example of Slider
Set horizontally scrollable range inputs.
Toast
Toasts are used for notifications.
Example of Toast
Typography
Different types of text utilities are available.
Example of headings
For headings use h1, h2, h3, h4 & h5.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Example of texts
Different classes are available for different styles of text.
Sample text
Sample text
Sample text
Sample text
Sample text
Example of other text styles
Use text-center for aligning text to center, text-gray for gray color text & text-primary for primary color text.
Center text
Gray text
Primary text