Alert

Alert components are used to signify the state of the system

An Error occured

Saved successfully

Avatar

Avatars are graphical representation of users or user persona

Small Avatar Medium Avatar Big Avatar

Badge

Badge are used on avatars and icons to represent an activity

1

hello

1
Badge on Avatar 1

Button

Buttons are used to invoke functionality

Card

Card can be used in many places

Crypto
The new buzzword
Crypto currency is the most talked about topic these days. Click here to know more about it.
Crypto
Crypto
The new buzzword
Crypto currency is the most talked about topic these days. Click here to know more about it.
Crypto
Crypto
The new buzzword
Crypto currency is the most talked about topic these days. Click here to know more about it.

Resonsive Image

Images are the life of any website. You can use these images which are responsive

Responsive image Round image

Input

Inputs are used everuwhere in a website. From navbars to menus. Here are some different styles of input.

Typography

Text makes your content meaningful

⭐ Headings

There are different sizes of headings you can use. You can use the h1, h2, h3... depending on your size preference. And then you can put class name as light-heading or dark-heading to get light or dark text as shown in the below code snippets.

Heading 1

Code Snippet for h1 heading

Heading 2 but bold

Code Snippet for h2 heading

Heading 3

Code Snippet for h3 heading

Heading 4 but bold

Code Snippet for h4 heading

⭐ Paragraph

Paragraph is used to explain info. You can use different sizes of paragraphs by giving the class name as big-para, medium-para and small-para

Big Pararaph

The size of this paragraph is biggest. The size of this paragraph is biggest. The size of this paragraph is biggest.

Code Snippet for big paragraph

Medium Paragraph

The size of this paragraph is medium. The size of this paragraph is medium. The size of this paragraph is medium.

Code Snippet for mediumg paragraph

Small Paragraph

The size of this paragraph is small. The size of this paragraph is small. The size of this paragraph is small.

Code Snippet for small paragraph

Centered Paragraph

This paragraph is centered. This paragraph is centered. This paragraph is centered.

Code Snippet for centered paragraph

List

Lists are helpful in organising your data


Unordered lists

These type of lists are ordered in no particular order

  • Element 1
  • Element 2
  • Element 3

Ordered lists

These type of lists are ordered in a particular order

  1. Element 1
  2. Element 2
  3. Element 3

Grids

Grids can be used to segregrate data coherently


2 Item Grid

Grid Item 1
Grid Item 2

3 Item Grid

Grid Item 1
Grid Item 2
Grid Item 3

Multiple Item Grid

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6

Toast

Toast is used to show notifications which do not require any user action


Picture saved successfully
x

Rating

Star rating can be used to rate any component

⭐ ⭐ ⭐ ⭐ ⭐

Slider

Slider is used to show a range of values

Price : 0