Arcade Component Library

The Arcade component UI library is a Open Sourced and a light CSS library to easily build your UI with pre-made components. Live Hosted Link - Arcade Library

How To Get Started

Copy your Font Awesome Kit CDN and Arcade Component Library css link tags at the head of your project.

Font Awesome CDN -> import your FontAwesome CDN

Choose either the html or css version:

Arcade components.css for HTML ->

<link rel="stylesheet" href="https://nifty-tesla-85dda2.netlify.app/Components/components.css">

Arcade components.css for CSS ->

@import url("https://nifty-tesla-85dda2.netlify.app/Components/components.css")

If you have copied HTML version then paste it at the head tag of your HTML document. If you have copied CSS version then paste it at the top of you CSS file.

Technology Used

• HTML
• CSS
• JavaScript

Components Available

1. Avatars

   • Profile Avatars
   • Text Avatars

2. Alerts

   • Primary Alert
   • Secondary Alert
   • Signature Alert
   • Error Alert
   • Success Alert
   • Warning Alert

3. Badges

   • Text and icon Badges
   • Status Badges on Profiles

4. Buttons

   • Solid Buttons
   • Outline Buttons
   • Other Button Styles
   • Icon Buttons
   • Toggle Buttons
   • Floating Action Button

5. Cards

   • Card with Badge
   • Card with Dismiss
   • Card with Text overlay
   • Vertical/Horizontal cards
   • Cards with shadow
   • Flexible/Responsive Card

6. Images

   • Responsive Image
   • Round Image

7. Input

   • Default Input
   • input with validation styles

8. Lists

   • Spaced Lists
   • Stacked Ordered Lists
   • Stacked Unordered Lists

9. Navigation

   • Simple Navbar
   • Navbar

10. Modal

11. Rating

12. Toast

    • Error Toast
    • Succes Toast
    • Warning Toast

13. Slider

14. Simple Grid Layout

15. Typography

Screenshots