Slate-component-library

Slate UI CSS library to easily build UI with pre-customized structures. Live Hosted Link - Slate UI

Technology Used

HTML
CSS
JavaScript

Features

Avatars
- Image Avatars
- Text Avatars
Alerts
- Primary Alert
- Secondary Alert
- Error Alert
- Success Alert
- Warning Alert
Badges
- Count Badges on Icons
- Status Badges on Profiles
Buttons
- Solid Buttons
- Outline Buttons
- Link Buttons
- Icon Buttons
- Floating Action Button
Cards
- Card with Badge
- Card with Dismiss
- Card with Text overlay
- Text only cards
- Vertical/Horizontal cards
- Cards with shadow
Images
- Responsive Image
- Round Image
Input with text validation
Lists
- Spaced Lists
- Ordered List
- Unordered List
- List with alphabets lower / upper
- List with roman lower / upper
- List with numbers
Navigation
Modal
Ratings
- Start Ratings
- Mood Ratings
Text Utils (Typography)
Toast
- Success Toast
- Error Toast
- Warning Toast
Grid
- 50:50 Grid
- 70:30 Grid
- 30:70 Grid

How to Use this Component Library

Copy lineIcons CDN, and fasterUI CSS link Put this links in your project head tag.
- Material Icon CDN -> <br /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <br />
- fasterUI components.css -> <br /> <<link rel="stylesheet" href="https://agri-component.netlify.app/css/components.css">> <br />
Copy HTML of the component that you want to use in your project
And you are done! fasterUI Components will be available in your project! 😎 🥳

Screenshots