Avatar
Avatar are images that user can set as a profile picture. It can be custom photos or can be in text format
Image Avatar
To use add code from below code snippet and add class .avatar to create circular avatar and add class .avatar-lg-size ,
.avatar-md-size , .avatar-sm-size , .avatar-xs-size for different sizes
Text Avatar
use class .avatar-text to create text avatar
Alerts
Alert messages are used to notify the user about something special: danger, success, information or warning.
Simple Alert
use class .alert and add any of the classes . success ,
. error , .info , .warning to show different types of message
Success
This is success alert
Error
This is error alert
Info
This is info alert
warning
This is warning alert
Badges
Badges are used to provide additional information to user.Example: to show count of items in cart ,notifications
Avatar Badges
To use add code from below code snippet and add class .badge to create avatar badges and add class .available ,
.away , .busy to show
different status of user
Images Badges
use class .badge-icon alongwith .badge to create badge icon
Buttons
Buttons are also called as Call to action. it helps to create user interaction
Primary Button
To use add code from below code snippet and add class .btn to create simple button and add classes .btn-lg for large size button ,
.btn-sm for small size button , and class .btn-solid-primaryfor solid button
Outline Button
use class .btn-outline-primary to create outline
button and .btn-rounded-5 ,.btn-rounded-2r for rounded corner button
Text-Icon Button
use class .text-icon-btn to create text icon
button
Icon & Link Button
use class .btn-icon to create icon button and
.link-text-primary for link button
Floating action Button
use class .btn-float to create floating button and
add class .btn-primary-color,.btn-secondary-color for primary and secondary button
Card
Cards are used to display items of similar types. It can vary from a basic card to complex card with overlay text and icons
Basic Card
use class .basic-card to create simple card
Card with Badge
use class .card-w-badge to create card with badge
Card with dismiss
use class .card-w-dismiss to create card with
close icon
Card with Text Overlay
use class .card-w-overlay alongwith .basic-card to create card with overlay text
Text card
use class .text-card alongwith .basic-card to create text only card
Horizontal Card
use class .card-horizontal alongwith .basic-card to create horizontal card
Card with shadow
use class .card-w-shadow alongwith .basic-card to create card with shadow
Input Box
An Input box is used to collect user inputs.
Input Box with label
Disabled Input
Add disabled attribute to disable input
box
Validation form
Responsive Image
use class .img-responsive for responsive image and
.round-corner for rounded corner responsive image
Rounded image
use class .circular-imgfor circular image
Rating
Rating component is used to give review to a service provided.usually seen in E-commerce website to show how good/bad the product is.
Static rating
use class .star-ratingto implement static rating
Dynamic Rating
use class .star-rating-dynamicto implement dynamic
rating
List
Lists are used to display list of similar items .it can be in the form of bullet points, without any icon in front as well as stacked list for notifications.
Simple List
use class .styled-list-square to create unordered
list with square , .styled-list-circle for unordered list with
circle , .list-style-none for list with no style
- List1
- List2
- List3
- List1
- List2
- List3
- List1
- List2
- List3
Notification Stacked List
use class .stacked-list to create stacked list
- Notification
- 25% discount on all products
- Buy 1 get 2 free
- DIY home decor
Typography
Add font family of your choice from google fonts
Headings
use class .h1 ,
to style h1 tag,
.h2
to style h2 tag , .h3, .h4 , .h5, .h6 to style
h3,h4,h5,h6 tags
This is heading1
This is heading2
This is heading3
This is heading4
This is heading5
This is heading6
Paragraph
use class .main-p to
style main component paragraph and .sub-p to style
subcomponent paragraph
This is main component definition paragraph
This is sub component definition paragraph
Modal
Modal is a dialog box/popup window that is displayed on top of the current page and user has to interact with the pop-up to proceed further.
Grid
Grids are used in creating fluid and responsive layout .
Two Column Grid
use class
.grid-2
to style 50:50 grid layout
Left content
Right content
Three Column Grid
use class
.grid-3
to style three column grid layout
Left content
Center content
Right content
Slider
Slider is used to get user's input for a range of values.Mostly used in E-commerce application to filter products based on price ranges , ratings