Getting Started

Installation

HTML: Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load CSS.

CSS: Copy-paste this code on your css file.

Avatar

The Avatar component is used to represent a user, and displays the profile picture or icon.

Usage

avatar

SK

avatar

Alert

Alerts are used to communicate a state that affects a system, feature or page.

Usage

Error has occured!

You response is submitted.

This file can harm your device.

Your work is pending.

Badge

Badges are used to highlight an item's status for quick recognition.

Usage

Danger Warning Info Light Dark

Badge on Avatar & Icons

avatar
5

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Usage

Icons Button

Card

A Card is a content container. Cards are full of interactive elements such as text, links, buttons or images.

Text in cards

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi animi voluptas rerum vero ipsa? Quod saepe dolores totam dolor veniam provident quibusdam facilis nulla perspiciatis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est dicta ipsam facere ex facilis dignissimos odit ullam fugiat totam deleniti? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic debitis beatae repellendus doloribus accusamus ullam dolores modi fuga ipsum consequatur?

Card with badges

50% off

Highlander

Men Slim Fit Shirt

Rs. 999

Rs. 1998

(50% OFF)

Card with dismiss

Highlander

Men Slim Fit Shirt

Rs. 999

Rs. 1998

(50% OFF)

Card with text overlay

Out of Stock

Highlander

Men Slim Fit Shirt

Rs. 999

Rs. 1998

(50% OFF)

Images

The Image component is used to display images.

Responsive Image

Round Image

Input

The Input component is a component that is used to get user input in a text field.

TextBox

List

List component is used to display list items. It renders a ul element by default.

List without spaces

  • ItemOne
  • Itemwo
  • ItemThree
  • ItemFour

List with spaces

  • ItemOne
  • itemwo
  • itemThree
  • itemFour