- HTML
- CSS
- JavaScript
To get the styles of the components, add the following line of code in the head tag of your HTML document.
<link rel="stylesheet" type="text/css" href="https://style-ui.netlify.app/components.css" />
<script src="https://kit.fontawesome.com/9903823db4.js" crossorigin="anonymous"></script>- Alert - An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
- Avatar - An avatar is typically used to display a user profile as a picture, an icon, or short text.
- Badge - Badge generates a small badge to the top-right of its children component.
- Button - Buttons allow users to take actions, and make choices, with a single tap.
- Card - A card has multiple layouts and you can specify different class names in order to use different layouts.
- Grid - The grid adapts to screen size and orientation, ensuring consistency across layouts. size.
- Image - This image component is used to display images in a responsive manner, changing according to your screen size.
- Input - Text field inputs allow users to enter text into a UI. They typically appear in forms and dialogs.
- Lists - Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
- Modal - The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
- Navigation - Navigation bar is used to navigate through different pages in the web application with ease.
- Rating - Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
- Slider - Sliders allow users to make selections from a range of values.
- Snackbar - Snackbars provide brief notifications. The component is also known as a toast.
- Text Utility - Use text utilities to maintain consistency in your text throughout your project.
