Alert

Alert is used to convey a message to the users which requires minimal interaction with user.

Success Alert

Warning Alert

Error Alert

Info Alert

Avatar

An avatar is a visual representation of a user or entity.

There are various size availabe for the user and it can be simply done by changing the class

These classes are:

  1. Extra Small: class="avatar-xs"
  2. Small: class="avatar-sm"
  3. Medium: class="avatar-md"
  4. Large: class="avatar-lg"
  5. Extra Large: class="avatar-xl"
avatar-xs avatar-sm avatar-md avatar-lg avatar-xl

Badge

A badge is a visual indicator which can contain numeric values or just a simple indicator usually used for notifications, user status or on cards.

avatar-md
avatar-md
avatar-md
2
8

Buttons

Buttons are used to interact with the user. It is generally used as call to actions(CTAs).

Card

Cards are most widely used component on the internet. It is usually used to display single content with images, only text or images with CTA.

Image

Card with Image and text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been

Image

Card with button and shadow

Lorem Ipsum is simple

Click Me
Image

Card with overlay and badge

Lorem Ipsum is simply dummy text of the

Out of Stock

Text Only Card

Lorem Ipsum is simple Lorem, ipsum dolor sit amet consectetur adipisicing elit. In quisquam tempore soluta voluptates omnis placeat quae quo facere cum itaque temporibus ipsa expedita, excepturi possimus rem totam, quas voluptas impedit.

Click Me
Image

Horizontal Card

Lorem Ipsum is simple facere cum itaque temporibus ipsa expedita, excepturi possimus rem totam, quas voluptas impedit.

Images

Images are widely used in a website to display the products, set a prfile image. Images usually take the dimensions of the parent and are responsive.

round-image square-img round-border-img

Input

Input is used to take the required information from the user. Input should always be use with label for accessibility.

Please Enter valid E-mail ID
Please enter 10 digit number
Minimum 10 characters

List

List is used to listing down the information.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 1
  • Item 2
  • Item 3
  • Item 4

Stacked List

  • I am Item 1
  • I am Item 2
  • I am Item 3
  • I am Item 4

Rating

Rating is used to rate the products. It is mainly used in E-commerce website.

Slider

Slider is used to set values by sliding on a horizontal plane (left to right or a backward/forward motion).

Text Utilities

Text Utilities for your next project

Heading

H1 text

H2 text

H3 text

H4 text

H5 text
H6 text

Font Weight

I am bold

I am semi bold

I am regular