Getting Started

Components

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. Also, you will need to link font-awesome for using the icons in your html page.

Avatar

Avatars are often used to show profile pictures. Use the correct class to easily create customizable avatars The avatar component has 3 different sizes large, medium and small.

avatar avatar avatar

Badge

Badge on Icon

Badges are used to highlight an item's status for quick recognition. Below is the example of badge on count followed by its code.

7
20
16

Badge on Avatar

Below is the example of badge on Avatar, followed by its code.

avatar-image1
avatar-image3
avatar-image2

Alert

Alerts are used to attract user's attention for important information. Alert messages can be used to notify the user about something special: danger, success, information or warning.

This is info alert
This is success alert.
This is danger alert.
This is warning alert.

Button

Primary Button

Primary button gives more semantic meaning to the element we are applying.

Button Link

Links button allow users to click their way from page to page

Large Button
Medium Button
Small Button

Icon Button

An icon in button represents the action that it will do.

Floating Button

A floating action button performs the primary actions on the screen.They are usually in circular shape with an icon at center. They are mostly at one side corner of screen with fixed position.

Outline Button

The outline button style removes all background images or colors from a button and gives it a lighter look.

Horizontal Card with Badge

Cards are great for organizing and enhancing a website's user interface. Each card is uniquely designed to make it easy for users to read the card content.

Best Seller

Heading

Sub Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, error accusantium eius fuga. Ut sunt earum et dignissimos tempore in omnis veniam a quis officia qui iure architecto. Rem incidunt repudiandae aut fugit rerum non dignissimos molestiae ut provident distinctio rem sequi quaerat.

Rs.2000 Rs.2500

Vertical Card

Heading

Sub Heading

Rs.300 Rs.400

Dismiss Card

This card has close button on top right corner.

Heading

Sub Heading

Rs.300 Rs.400

Text over card

You can overlay text over the image.

Heading

Sub Heading

Rs.300 Rs.400
Out of Stock

Text card

Heading

Sub Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, error accusantium eius fuga. Ut sunt earum et dignissimos tempore in omnis veniam a quis officia qui iure architecto. Rem incidunt repudiandae aut fugit rerum non

Responsive Image

Image will be responsive as it will change its size based on width of screen.

Round Image

Round images are generally used to show profile picture.

Text Box and Validators

Text box are used to take input from user. Also validations can be done using different types of Validators like email, password.

Text Box with error style

Status of user input can be shown by textout. Developer need to make this class active using Javascript.

Rating

Rating can be used to allow the users to share their opinion about the product, documentation page, photo and more.

Created By Raghav Bang