Getting started

To get the styles of the components, add the following line of code in the head tag of your html document.

Alert

Type 1 Alerts

✔️ This is a Success Alert!
❌ This is a Failure Alert!
🔔 This is a Normal Alert!

Code Snippet :

Type 2 Alerts

✔️ This is a Success Alert!
❌ This is a Failure Alert!
🔔 This is a Normal Alert!

Code Snippet :

Avatar

Code Snippet :

Badges

Badges in Icon

3 3 3

Code Snippet :

Badges in Avatar

Code Snippet :

Buttons

Primary Buttons

Code Snippet :

Secondary Buttons

Code Snippet :

Cards

Vertical Cards

Simple Card

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, consequatur? Autem iusto explicabo pariatur dicta perferendis veritatis doloremque nisi reprehenderit adipisci blanditiis, corrupti magnam deserunt voluptatum voluptatem incidunt distinctio enim?

{name}

Product Card 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nam sunt ratione quaerat! Eligendi minus eveniet totam sed quidem.

Deluxe
{name}

Product Card 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam nam sunt ratione quaerat! Eligendi minus eveniet totam sed quidem.

Code Snippet :

Horizontal Cards

Type 1

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, consequatur? Autem iusto explicabo pariatur dicta perferendis veritatis doloremque nisi reprehenderit adipisci blanditiis.

Type 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit, consequatur? Autem iusto explicabo pariatur dicta perferendis veritatis doloremque nisi reprehenderit adipisci blanditiis.

Code Snippet :

Icons

Code Snippet :

Navigation

Code Snippet :

Modals

Are you sure you want to exit? Press X to exit.
X

Code Snippet :

Typography

Headings

Big Heading

Medium Heading

Small Heading

Code Snippet :

Texts

This is a bigger text...

This is a medium text...

This is a smaller text...

Code Snippet :