Usage

Copy-paste the stylesheet link into your head tag before all other stylesheets to load our CSS.

Alert

Provide contextual feedback messages for typical user actions.

Examples

Alerts are available in four classes - alert-success, alert-warning, alert-danger & alert-primary.

Your order is placed Your have insufficient funds Your account has been blocked Primary alert with close button

Avatar

Show display picture of a user.

Examples of Image Avatar

Avatars are available for 4 different sizes, having class name avatar-lg, avatar-md, avatar-sm & avatar-xs.

avatar avatar avatar avatar

Examples of Text Avatar

Text Avatars can be made by adding class name avatar-text.

AP AP AP AP

Badge

Component to display count or label.

Examples

Two types of status badges are available - status-online & status-offline. For displaying notification count badge-number can be used.

avatar
avatar
avatar
avatar
5

Button

Different styles of buttons of CTA & secondary colors.

Examples of CTA buttons

Primary buttons are used to attract user. Use the below classes for the type of button you want.

Examples of secondary buttons

Secondary buttons are used where user's attention is not required much. Use the below classes for the type of button you want.

Card

Cards are used to display content inside a container. Different styles of card variants are available.

Example of vertical card

Vertical cards are used to display product data on websites.

camera
Camera
Rs. 20,000

Example of vertical card with badge

Cards with badges are used to attract user.

NEW camera
Camera
Rs. 20,000

Example of vertical card with text overlay

Text overlay is used to show text on top of cards.

OUT OF STOCK camera
Camera
Rs. 20,000

Example of horizontal card of medium size

Horizontal cards are also used in websites to display product data in a horizontal manner.

camera
Camera
Rs. 20,000 50% off
Quantity : 2

Example of horizontal card of large size

This is a variation of horizontal card and can be used according to requirement.

camera
Camera
Rs. 20,000 50% off

Example of text card

Text card i used to display textual information to the user. It comes with a dismiss button.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sodales neque sodales ut etiam sit amet nisl. Sed adipiscing diam donec adipiscing tristique risus. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Neque gravida in fermentum et sollicitudin ac orci

Form

Forms are used to collect user information.

Example of Login form

Various fields are listed that are required in a login form.

Login

Grid

Grids are used for creating columns & rows.

Example of Grid-2

Two column grid with 1fr width.

dog with specs

Buy Cameras

Upto 50% off

Example of Grid-3

Three column grid with 1fr width.

dog with specs

Nikon DSLR Camera

50% off

Image

Images classes are available to make your images responsive or round shaped.

Example of responsive image

Give a fixed width to img-wrapper for the size of image you want. Use img-responsive to make the image responsive.

dog with specs

Example of round image

Give width & height to img-round-sizing & add img-round to get a round image.

dog with specs

Input

Different types of input fields are available.

Example of inputs

Inputs of type text, radio & checkbox are available. Text input has a class input-error to depict error in inputs.

List

Displaying a series of content.

Example of spaced lists

Spaced lists are available with class list. Use list-inline for horizontal list.

  • list item
  • list item
  • list item
  • list item
  • list item
  • list item

Example of notification list

Notification list is used in social media apps. It can be customised according to requirement.

  • avatar
    • username
    • notification message
    • date
  • avatar
    • username
    • notification message
    • date
  • avatar
    • username
    • notification message
    • date

Rating

Ratings are used for reviews.

Example of Rating

The rating 5 stars can be used for asking reviews or for display purpose also. The rating pill can be used as badges at different places to attract user.

4

Slider

Slider is used for a range of input.

Example of Slider

Set horizontally scrollable range inputs.

Toast

Toasts are used for notifications.

Example of Toast

This is a toast message.

Typography

Different types of text utilities are available.

Example of headings

For headings use h1, h2, h3, h4 & h5.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Example of texts

Different classes are available for different styles of text.

Sample text

Sample text

Sample text

Sample text

Sample text

Example of other text styles

Use text-center for aligning text to center, text-gray for gray color text & text-primary for primary color text.

Center text

Gray text

Primary text