Documentation

How to use?

Before adding any components head over to your HTML page and add this link inside the head section that helps import the css for the components that you want to use.

To use icons in the project, you can go over to kit generation site of Font Awesome to generate your own icons kit for free and link the CDN code to the head of your HTML. Just like below..

NothingUI also enables you to import the styles for components just like the below example. All components can be imported similarly by changing the name of the component in the link

Text Utilities

Typography (Heading)

To use this header styles, use the classes h-1 h-2 h-3 h-4 h-5 h-6

Heading - 1

Heading - 2

Heading - 3

Heading - 4

Heading - 5

Heading - 6

Align Texts

To use this text aligning styles, use the classes text-left text-center text-right

Left Aligned Text

Center Aligned Text

Right Aligned Text

Typography (Texts)

To use this font sizes, use the classes font-xsm font-sm-1 font-sm-2 font-md-1 font-md-2 font-lg font-xl font-2xl font-3xl

Very Small Text

Small Text - 1

Small Text - 2

Medium Text - 1

Medium Text - 2

Large Text

X-Large Text

2X-Large Text

3X-Large Text

Typography (Font Weight)

To use this font weights, use the classes font-bold-1 font-bold-4 font-bold-5 font-bold-6 font-bold-7

Text Bold - 1

Text Bold - 4

Text Bold - 5

Text Bold - 6

Text Bold - 7

Components

Alert

This component is used to inform the user about any form of alerts which are distinguished by th e class name for each context such as primary, success, error and warning. To use these alerts, use the contextual classes (e.g., .alert-success).

This is a primary alert. You get a close icon as well

This is a success alert. You get a close icon as well

This is a danger alert. You get a close icon as well

This is a warning alert. You get a close icon as well

This is a simple alert. You get a close icon as well

Avatar

This style is used to set your avatar in different sizes.

Same sized Avatars

You can add this type of Avatar to your project by copying above code and specifying the source for the image of Avatar

Different sized Avatars

To add one of the sized avatars into your project, you can mention the size class inside the img (e.g., avatar-sm for small avatar, avatar-lg for large avatars)

Badge

Putting badges on icons, avatars, buttons and texts is much easier with a couple of classes.

Badge on Avatar

You can use badges on avatar according to the status you want to set on it. For example if you want active badge add active-badge into the span tag.

99+

Badge on Icons

You can use badges on icons as shown above. All you need to do is select an icon from Font Awesome and replace in the given code snippet after generating your kit as guided in the documentation and choose colors among the given color class selectors.

Buttons

Different buttons and links, solid and outlined, just a class name away.

Primary Buttons

Outlined Buttons

Disabled Buttons

Link Link

Link

Rounded Buttons

Floating Button

Button with Icons

Snackbar

Add this to your HTML

Add this to your Script portion

Card

Only 2 left!

PlayStation 5 - DVD + Online

₹ 39,999.00 ₹ 59,999.00 (33% off)

Vertical Card With Image and Badge

PlayStation 5 - DVD + Online

₹ 39,999.00 ₹ 59,999.00 (33% off)

Vertical Card without Badge

PlayStation 5 - DVD + Online

₹ 39,999.00 ₹ 59,999.00 (33% off)

Sold Out!

Card with Text Overlay

PlayStation 5 - DVD + Online

₹ 39,999.00 ₹ 59,999.00 (33% off)

PlayStation 5 - DVD + Online

₹ 39,999.00 ₹ 59,999.00 (33% off)

Quantity:

Horizontal Card with Image

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa totam at illum sed provident magnam, expedita perferendis id nam. Deleniti autem quae deserunt culpa est doloribus saepe odio architecto blanditiis?

Text Only Card

Image

Responsive Image that easily fits inside your container.

Rounded Images in different sizes.

Input

Normal Input

Form Actions

E-mail

Password

Successful Input

Danger Input

Warning Input

Checkbox Input

Checked

Unchecked

Disabled

Radio Button Input

Checked

Unchecked

Disabled