CheckMate is a light-weight CSS library with pre-defined classes that helps create beautiful, responsive layouts using human-friendly HTML.
In order to use the components of CheckMate UI in your project, just copy paste the stylesheet <link> in the <head> tag of your html document, above all other stylesheets.
<link
rel="stylesheet"
href="https://checkmate-ui.netlify.app/css/components.css"
/>- Alert
- Avatar
- Badge
- Button
- Card
- Image
- Input
- List
- Navigation
- Typography
- Form
- Slider
- Modal
- Grid
- Rating
- Toast
- Hamburger
Alert is used to display important message to the user.
There are different types of Alerts present in the library.
- Info Alert
- Success Alert
- Danger Alert
- Warning Alert
Avatar is used to display the image of a user.
There are different types of Avatars present in the library.
- Default Avatar
- Small Alert
- Medium Alert
- Large Alert
Badge is used to display the status(online or offline) of the user or for notification count.
There are different types of Badges present in the library.
- Badges on Avatars
- Badges on Icons
Buttons are used to make a web app interactive and to make user take an action.
There are different types of Buttons present in the library.
- Primary Button
- Link Button
- Icon Button
- Floating Button
Card is essentially used in ecommerce or video library or social media regarding one piece of information.
There are different types of Crads present in the library.
- Vertical Card
- Shadow Card
- Text Card
- Text Overlay Card
- Horizontal Card
- Ecommerce Product Card
- Ecommerce Cart Card
- Ecommerce Bill Card
Image is used to display large image on the website.
There are different types of Images present in the library.
- Responsive Image
- Circle Image
Input is used to ask a piece a piece of information from the user.
There are different types of Inputs present in the library.
- Basic Input
- Error Input
List is used to display choices inside a heading to the user.
There are different types of List present in the library.
- Simple List
- Stacked List
Navigation is used to navigate to different sections or pages of a website.
There are different types of Navigation present in the library.
- Simple Navigation
Typography is used to format text in a website.
There are different types of Typography examples present in the library.
- Heading
- Sizes
- Alignment
- Extra Styles
Form is used in login or signup pages of a website to ask all the information regarding one thing from a user.
There is a single form present in the library.
- Signup Form
Slider is used to display items present in its range to the user.
There is a single slider present in the library.
- Range Slider
Modal is used to ask an action among choices from a user.
There is a single modal present in the library.
- Simple Modal
Grid is used to divide a web page into sections.
There are two items and three items grid present in the library.
- Two Items Grid
- Three Items Grid
Rating is used to ask a rating or a service or product from a user.
There is a single rating present in the library.
- Simple Rating
Toast is used to display a notification to the user because of the action he took.
There is a single toast present in the library.
- Simple Toast
Hamburger contains list items which can be opened and closed on click of a button. It is displayed on navbar and contains routes to different pages.
There is a single hamburger present in the library.
- Simple Hamburger
.gif)
.gif)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent