Component Library Using HTML/CSS.
The website is responsive and can be accessed using devices of various screen size.
To start using the components in your project, Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load CSS.
<link rel="stylesheet" href="https://kairodesigns.netlify.app/styles.css" />To get the Font Awesome Icons, import the following link tag of your project.
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>- Avatar
- Alert
- Badge
- Button
- Card
- Image
- Input
- TextUtils
- List
- Navigation
- Modal
- Rating
- Snackbar/Toast
- Grids
- Slider
Users can choose from a variety of avatars to use as their profile photo. Avatars can either be the images of that person, vector images or any random images.
You will find the following types of Avatar on https://kairodesigns.netlify.app/components/avatar/avatar
- Same Sized Avatars
- Square Avatars
- Different Sized Avatars
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
You will find the following types of Alert on https://kairodesigns.netlify.app/components/alert/alert
- Error Alert
- Info Alert
- Success Alert
- Warning Alert
Badges are used to add additional information to any content. Alternatively, they can also be considered as numerical indicators of how many items are associated with a link.
You will find the following types of Badge on https://kairodesigns.netlify.app/components/badges/badges
- Text with Badge
- Badge on Icons
- Badge on Avatars
CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colors, text sizes, padding, and even change styling properties when buttons enter different states.
You will find the following types of Button on https://kairodesigns.netlify.app/components/button/button
- Primary Buttons
- Floating Button
- Icon Button
CSS cards are great for organizing and enhancing a website's user interface. Each card is uniquely designed to make it easy for users to read the card content.
You will find the following types of Card on https://kairodesigns.netlify.app/components/card/card
- Basic Card with Shadow
- Horizontal Card
- Cards with badge
- Cards with Dismiss
- Text Over Cards
- Horizontal Card Type II
Images play an important role in any webpage. CSS plays a good role to control image display.
You will find the following types of Image on https://kairodesigns.netlify.app/components/image/image
- Round Images
- Bordered Images
- Opacity in Images
- Responsive Images
The Input component is a component that is used to get user input in a text field.
You will find the following types of Input on https://kairodesigns.netlify.app/components/input/input
- Labelled Inputs
- Validation Inputs
- Input with Icons
- Textareas
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
You will find the following types of Typography on https://kairodesigns.netlify.app/components/text-utilities/textutil
- Headings
- Alignment
- Font Weights and Sizes
The CSS list properties allow you to: Set different list item markers for ordered lists. Set different list item markers for unordered lists.
You will find the following types of List on https://kairodesigns.netlify.app/components/lists/lists
- Numbered List
- Lower Alpha List
- Reversed List
- Circle List
- Square List
- Notification Stacked List
A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website.
You will find the following types of Navigation on https://kairodesigns.netlify.app/components/navigation/navigation
- Responsive Navigation bar for all screen sizes
A modal is a dialog box/popup window that is displayed on top of the current page: Open Modal.
You will find the following types of Modal on https://kairodesigns.netlify.app/components/modal/modal
- Modal Component
Ratings and reviews also help customers understand how a product works in real life before they purchase it.
You will find the following types of Rating on https://kairodesigns.netlify.app/components/rating/rating
- Filled Rating
- Emoticon Rating
The Snackbar/Toast/Notify component is like an alert box that is only shown for a couple of seconds.
You will find the following types of Toast on https://kairodesigns.netlify.app/components/snackbar/snackbar
- Bottom Snackbar
- Top Snackbar
CSS Grid can be used to structure elements in rows and columns.
You will find the following types of Grid on https://kairodesigns.netlify.app/components/grid/grid
- Two Columns Grid
- Three Columns Grid
CSS range sliders are a slider with a handle that allows users to select a certain value from a limited range. CSS range sliders are useful for: budgets. prices.
You will find the following types of Sliders on https://kairodesigns.netlify.app/components/slider/slider
- Default Range Slider
- Squared Range Slider
Have a look at the implementation of KairoDesigns Components.