Alerts

Examples of different Alerts:

It can be used with 4 variants : success | info | error | warning

This is a success alert

This is a info alert

This is a error alert

This is a warning alert

Avatar

Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items.

Examples of different Avatar:

It can be used with 4 variants : avatar-lg-size | avatar-md-size | avatar-sm-size | avatar-text

avatar
SR
avatar
SG
avatar
AB

Badge

Badges are being used to display a notification count or status information.

Examples of different Badges:

It can be used with 4 variants : online | offline | dnd | status

avatar
avatar
avatar

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.

Examples of different Primary Buttons:

It can be used with 4 variants : btn-solid-primary | btn-outline-primary | btn-icon-primary | link-text-primary

Primary Solid Button Primary Outline Button Add to Cart Primary Text
Examples of different Secondary Buttons:

It can be used with 4 variants : btn-solid-secondary | btn-outline-secondary | btn-icon-secondary | link-text-secondary

Secondary Solid Button Secondary Outline Button Add to Cart Secondary Text
Examples of Disabled Buttons:

If you want to style disabled button add btn-disabled class and you are good to go.

Primary Solid Button Secondary Solid Button
Examples of Buttons with differnet sizes:

It can be used with 2 variants : btn-lg | btn-sm

Primary Solid Large Button Primary Solid Medium Button Primary Solid Small Button
Examples of Toggle and Float Buttons:

Cards

Example of Basic Card:
Jacket
An outer garment extending either to the waist or the hips, typically having sleeves and a fastening down the front.
Example of Image Card:
jacket
Jacket
Rs. 3,000
Example of E-Commerce Card:
New
jacket
Jacket
Rs. 3,000
jacket
Jacket
Rs. 3,000 Rs. 999 (10% OFF)
jacket
Jacket
Rs. 3,000 Rs. 999 (10% OFF)
Example of Card with Text Overlay
Out Of Stock
New
jacket
Jacket
Rs. 3,000
Example of Social Media Card
avatar Smile Gupta
jacket
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, inventore nisi. Dolore quo quas illo sed ullam labore totam sint.
Example of Horizontal Card
jacket
Jacket
Rs. 3,000 Rs. 999 (10% OFF)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, inventore nisi. Dolore quo quas illo sed ullam labore totam sint.

Form Elements

Example of Commonly used Input elements:

Input Field

Text Area

Checkbox

Radio Buttons

Form Validations Example:
Signup Form
This field is required
This field is required

CSS Code

JS Code

Grid Simplified

Example of 50-50 layout:

Combo Pack!

Starting At Rs.799
Example of 70-30 layout:

Combo Pack!

Starting At Rs.799
Example of 3 column layout:

Images

Example of Responsive Image:
cute-dog
Examples of different Images:

It can be used with 2 variants : img-round | img-square

cute-dog cute-dog

Lists

Example of Non Bulleted Lists
  • list item1
  • list item2
  • list item3
Example of List with inline items
  • list item1
  • list item2
  • list item3

Rating

Example of Rating:

Slider

Example of Slider:

Toast

Example of Toast:

It can be used with 4 variants : success | info | error | warning

I am success toast
I am info toast
I am error toast
I am warning toast

Typography

Example of Heading text

It can be used with 6 variants : h1 | h2 | h3 | h4 | h5 | h6

This is h1 heading

This is h2 heading

This is h3 heading

This is h4 heading

This is h5 heading
This is h6 heading
Example of Text with different styles

This is primary colored text

This is secondary colored text

This is disabled text

This is uppercased text

This is lowercased text

This is capitalised text

This is small text

This is big text

This is light text

This is bold text

This is italiced text

This is underlined text