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