An open source Library where you get all the Styles and Component related to your Website . It is based on plain CSS but combine with utility CSS which gives flexibility and control to the user related to any component.
Live Website: Super UI
Github Repo of Components: Github
To start using the Component Library Copy and Paste the given code inn your HTML file or import it in Main css file
<link rel="stylesheet" href="https://tender-mccarthy-d4aa39.netlify.app/component.css"/> @import url("https://tender-mccarthy-d4aa39.netlify.app/component.css");Alerts are used to attract user's attention for important information without interrupting the user's flow.
We have seven types of Alert Component:
- Primary Alert
- Secondary Alert
- Success Alert
- Danger Alert
- Warning Alert
- Light Alert
- Dark Alert
Click here: https://super-ui.netlify.app/document/alert/alert.html
Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items
We have only one type of Avatar Component:
- Image Rounded Avatar
Click here: https://super-ui.netlify.app/document/avatar/avatar.html
Badges are being used to display a notification count or status information like if user is online or offline
We have two types of Badges Component:
- Image Rounded Avatar
- Text Rounded Avatar
Click here: https://super-ui.netlify.app/document/badges/badges.html
Buttons are also called as call to action. We have range of buttons and their states. You may use a tag or button element, you need to add respective classes, and you are good to go.
We have three types of Button Component:
- Primary Button
- Link Button
- Icon Button
Click here: https://super-ui.netlify.app/document/button/button.html
Card are used to show user related data collectively, like product details
We have two types of Card Component:
- Horizontal Card
- Vertical Card
Click here: https://super-ui.netlify.app/document/card/card.html
Images can be responsive to fit the parent's width, and also can be customised to be round shaped
We have two types of Image Component:
- Responsive Image
- Responsive Round Image
Click here: https://super-ui.netlify.app/document/image/image.html
Form are basically used to collect user data related to his/her authentication on any Web Application Platform
We have two types of Form Components:
- Active form fields
- Disabled form fields
Click here: https://super-ui.netlify.app/document/form/form.html
Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.
We have four types of List Components:
- Unordered List with bullets
- Ordered List with bullets
- List with no bullets
- List with inline items
Click here: https://super-ui.netlify.app/document/list/list.html
Utilities Class are used to provide same font-size , font-weight and text-color to heading or text content on any website
We have four types of Utilities Class:
- Heading
- Text
- Text color
- Text Alignment
Click here: https://super-ui.netlify.app/document/text_utilities/text_utilities.html
Naviagtion Bar or say Nav-bar is used in any website where all the essential option are mentioned , also it have the context of the project idea .
We any only one of Navigation Component:
- Normal Navigation
Click here: https://super-ui.netlify.app/document/navigation/navigation.html
This component can be used for toast or snackbar component. Toast is mostly used to show feedback message. Snackbar is to used show message that need user action.
We have three types of Toast Component:
- Success Toast
- Danger Toast
- Info Toast
Click here: https://super-ui.netlify.app/document/toast/toast.html
Rating components can be used as to get feedback of a product or services from the user.
We have only one type of Rating Component:
- Standard Rating
Click here: https://super-ui.netlify.app/document/rating/rating.html