Alerts

Alerts are used to attract attention of user to display important information without interrupting the user.

Example of Alerts

Alerts are available in five variations i.e Primary Alert, Secondary Alert, Successful Alert, Danger Alert and Warning Alert. Each Alert Variation has Standard and closeble type. To use the Alert component, you have to add alert class, followed by the variation eg:-alert, alert-closeble, alert-primary, alert-closeble alert-warning. Use different utility classes according to your needs.

Code Snippet for Alerts

Examples of Alerts with Close Button

Code Snippet for Alerts with Close Button

Javascript

Avatar

Avatar component is used to display user's profile picture.

Examples of Avatar

Avatar is available in 2 variations and 4 different sizes.To use avatar component just include class name avatar. Avatars can be customised to 4 different (small, medium, large) sizes based on your requirements.To style avatar sizes use class sm,md,xl.eg:-avatar-sm, avatar-md, avatar-xl.

Note:- Add responsive image class to img element in avatar.

Code Snippet for Avatar

Examples of Text Avatar

Code Snippet for Text Avatar

Badge

Badge Component are used to display a notification count or status information of the user

Examples of Badge

Badge Component has 2 variations.Badges can be used with Avatars to display status information of the user.Different colors green color badge shows the online status of user,and gray color badge shows the user is offline/inactive. Number Badges can be used to show cart or notification count. To use Badge Component add class badge along with badge-count and badge-active.

Button

Buttons are very useful for website. It is also know as Call to action. We have different types of buttons. It is use, when you want your users click on Call to action.

Examples of Button

Code Snippet of Button

Examples of Outline Button

Code Snippet of Outline Button

Examples of Text Button

Code Snippet of Text Button

Examples of Icon Button

Code Snippet for Icon Button

Examples of Different Button Sizes

Code Snippet for Different Button Sizes

Examples of Floating Action Button

Code Snippet for Floating Action Button

Card

Example of Cards

Code Snippet for Card

Card with Badge and Close Button

Code Snippet for Card with Badge and Close Button

Card with Shadow

Code Snippet for Card with Shadow

Card with Text Overlay

Code Snippet for Text Overlay Card

Horizontal Card

Code Snippet for Horizontail Card

Image

Image and media component is used everywhere.Image component can be responsive to their parent Element. (They never become wider from their parent.)

Examples of Image

Code Snippet for Image

Input

Inputs are very Important part to take data from user using form element.

Examples of Input

Code Snippet for Inputs

Navigation

Navigation use to navigate you user. Basically user can get useful link quakily form here.

Examples of Navigation

Code Snippet for Navigation

Typography

Check out below some of the text utilities that library has to offer.

Examples of Typography

Code Snippet of Text Styles

Examples of Some Text Utilities

Code Snippet of Text Utilities

Ratings

Rating component use in review sections of products. You can see on many e-commerce websites.

Examples of Ratings

Code Snippet for Ratings

Modal

Modal Use when you want to interrupt a user’s from current task to catch the user’s full attention.

Examples of Modal

Code Snippet for Modal

Live example of Modal

Code Snippet for Opening Modal

Javascript

Toast

Toast can be use for show small amount of message. Such as feedback message.

Example of Toast

Code Snippet for Toast

Live example of Toast

Code Snippet for Opening Toast

Javascript