Quick & Easy UI library for everyone.
##Quick Start
To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
<link
rel="stylesheet"
href="https://agniui.netlify.app/styles.css"
/>
Avatars can be used for user profile picture.
You will find the following types of Avatar on https://agniui.netlify.app/documentation.html#avatar
- Default Avatar
- Square shape Avatar
Badge can be used to show either status of the user (online, or offline) or you can use it show notification count on icons.
You will find the following types of Badge on https://agniui.netlify.app/documentation.html#badge
- Profile Badge
- Number Badge
Alerts can be used to show a message to the user.
You will find the following types of Alert on https://agniui.netlify.app/documentation.html#alert
- Simple Alert
- Outline Alert
Buttons can be used to make your web page interactive to your user. You can use them to take user action.
You will find the following types of Button on https://agniui.netlify.app/documentation.html#button
- Primary Button
- Outline Button
- Icon Button
- Link Button
- Floating Action Button
Cards can be proved very useful. You can use them to display content on an e-commerce app, or on a video library app. You can also use them to show user feedback in the form of text-only card on your site.
You will find the following types of Card on https://agniui.netlify.app/documentation.html#card
- Horizontal Text Card
- Vertical Item Card
- Text Overlay Card
- Dismiss Card with Shadow
Image can be used to display large picture on the website.
You will find the following types of Image on https://agniui.netlify.app/documentation.html#image
- Round Image
- Square Image
- Responsive Image
Input can be used to take input from your user. It can make your site more interactive.
You will find the following types of Input on https://agniui.netlify.app/documentation.html#input
- Form Input
- Form Input Error
- Radio Input
- Checkbox Input
Text utility classes can be used on any element for text modification/alignment, element placement, or to adjust padding and margin etc.
You will find the following types of Text utility on https://agniui.netlify.app/documentation.html#text_utilities
- Headings
- Small Text
- Gray Text
- Center Text
The Grid Layout classes offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
You will find the following types of Grid on https://agniui.netlify.app/documentation.html#grid
- Grid - Two Column
- Grid - Three Column
Snackbars inform users of a process that an app/website has performed or will perform. They appear temporarily, towards the bottom of the screen.
You will find the Snackbar on https://agniui.netlify.app/documentation.html#snackbar
