Azure UI is a CSS based component library developed to be used in any HTML file. Most of basic components can be imported from here and can be used according to any user's need.
To get the styles of the components and the JavaScript functionality, add the following line of code in the head tag of your HTML document.
<link rel="stylesheet" href="https://azure-ui.netlify.app/main.css">Alerts are those small pop up messages that come up on the screen that gives a brief about the action performed by the user. You can find the documentation here Azure UI has covered all the types of alerts:
- Information Alert
- Success Alert
- Danger Alert
- Warning Alert
Avatar are those circular or rectangular display pictures that represents an user. Check out about Avatars here Types of avatars:
- Circular
- Rounded Rectangle Available in different sizes? Check ✔
The small circular indicators on top of an icon or an avatar that basically depicts any notifications or new updates. Learn more about badges Types of Badges:
- icons with text badge
- icons with indicator badge
- avatar with text badge
- avatar with indicator badge Available in different sizes? Check ✔
As simple as it can be, buttons are a medium through which users can interact with the screens or perform any action. Learn how to use Azure UI's buttons Types:
- Contained buttons
- Ghost buttons
- Default buttons
- Raised buttons
- Buttons with icons
- Smooth buttons
- Circluar floating button
- Rounded floating button
- Link/text button
They contain a collected information about a similar topic. Cards come in a lot of variety, some of have text or images or both and also come Call to Action Buttons. You can find different cards here:
- Simple text cards
- Card with Image
- Horizontal Card
- Card with Badge
- Card with text overlay
Grids come in handy when you have multiple items that you want to display side by side or when you want to display couple of items in a particular layout. It comes in the following variety:
- Two Column Grid
- Three Column Grid
- Masonry Grid of 4 columns
These are not much, just easy to use responsive images Types:
- Responsive Image
- Rounded Image
Input fields such as email or password that is used to collect information from the users. Type:
well, lists are just simple lists or stacked lists. Types:
- Spaced List
- Stacked List
Navigations are used to navigate from one page to another. Its a very important part of a web app, usually present on the top of the page. Navigation comes in the following types:
- Reponsive navbar
- Dark mode Navbar
- Navbar with submenus
Ratings are used to give feedback for products or services Different types:
- Simple Rating
- Compact Rating
Modals are those pop-up boxes that appear on the screen when an user takes any action. You can find documentation here
Toast messages are not small messages that disappear after few seconds, again giving a status of the user action.
These includes everything about texts: heading, paragraphs, aligned texts, etc. Check here
Have a look at the implementation of Azure UI