To use NOVA Ui components in your projects paste this <link> element in your <head> before all other stylesheets.
<link rel="stylesheet" href="https://uinova.netlify.app/css/main.css">;
- Alert
- Avatar
- Badge
- Button
- Card
- Grid
- Image
- Input
- Lists
- Modal
- Navigation
- Ratings
- Text Utilities
- Toast
An alert displays a short, valuable feedback to the user's action without interrupting the user's tasks.
You can find following Alerts here.
- Simple Alert
- Fancy Alert
- Dismissable Alert
- Alert With Icons
Avatars are used to represent a person or object to give them a visual identity. It gives user and objects a digital identity.
You can find following Alerts here.
- Images Avatar
- Sizes Avatar
- Initials Avatar
- Shapes Avatar
Badges are used to draw user attention on change. That can be a change in status and count. It can be positioned at bottom-right, top-right etc.
You can find following Alerts here.
- Icon Badges
- Text Badges
- Button Badges
- Profile Badges
Buttons are everywhere on the web. They represent actions that user can take. Use Nova's custom button styles to use them in forms, modal, etc.
You can find following Alerts here.
- Contained Button
- Outlined Button
- Text Button
- Link Button
- Icon Button
- Floating Action Button
Cards represent a surface that displays content of a single topic. You can use Nova's predefined classes to create responsive and diffrent varients cards.
You can find following Alerts here.
- Basic Card
- Card With Badges
- Card With Dismiss
- Card With Text Overlay
- Text Only Card
- Horizontal/Vertical Card
- Cards With Shadow
This is the grid layout implementation of Nova.
You can find following Alerts here.
- Two Items in grid
- Three items in grid
- Layout items using autofill
- Span items in columns and rows
Images are essential part of web. They need to be responsive so they won't get bigger than their parent container. Use our predefined classes to make images responsive as well as of custom sizes.
You can find following Alerts here.
- Square Images
- Round Image
- Responsive Image
Inputs are important part of website interaction. Inputs collects data from the user and then use that data accordingly.
You can find following Alerts here.
- Basic Input Field
- Input Field With Placeholder
- Input Field With Labels
- Input Field Varients
- Input Form Types and Attributes
- Validation
List are great components to show series of content.
You can find following Alerts here.
- Basic Lists
- Stacked Lists
- Inline Lists
- Stacked Notification Lists
Modal are draws over everything on the web to give user quick message. You can close then using clear button. They uses position fixed
You can find following Alerts here.
- Basic Modal
- Lists Modal
- Confirmation Modal
They define useful links so that we can browse web page smoothly. We provide you with three basic types of navigation bars that are responsive as well.
You can find following Alerts here.
- Basic Navigation Bar
- Navigation Bar with Logo
- Navigation Links at center
Ratings allow us to see user experience with the product and service available on their plateform. We can also give our opinions using rartings.
You can find following Alerts here.
- Basic Rating
- Dynamic Rating
Typography is the main elment of the web. You can use our classes to style type on your websites.
You can find following Alerts here.
- Headings
- Headings With Diffrent Style
- Text alignment utilities
- Other Text Utilities (grey text, small text etc.).
Toast are like a notification. Toast provide user information about what process app is doing and will perform. They appear for short time and dissapear afterwords. You can also call then snackbars.
You can find following Alerts here.
- Basic Toast
- Positioned Toast
- Themed Toast