To start using the component in your personal project, just copy-paste these 👇 <link> tags into the <head> tag of your, before all your other stylesheets
<link rel="stylesheet" href="https://purplebrick.netlify.app/public/main.css" />
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>Some components requires Javascript to function as intended, so copy-paste the <script> tag just above the closing </body> tag of your project
<script src="https://purplebrick.netlify.app/public/main.js"></script>Alerts are used to attract user's attention for important information.
The different types of Alert available for use at https://purplebrick.netlify.app/public/components/alert/alert.html are:
- Info Alert
- Success Alert
- Warning Alert
- Danger Alert
Avatars are used for displaying either user's profile picture, initials, or some abstract image.
The different types of Avatar available for use at https://purplebrick.netlify.app/public/components/avatar/avatar.html are:
- circular
- squared
- rounded-corner
- outlined
Badges are used to display information like number of notifications, unread messages, items in cart etc.
The different types of Badge available for use at https://purplebrick.netlify.app/public/components/badge/badge.html are:
- circular
- squared
- rounded-corner-squared
Buttons are one of the clickable elements on a web page.
The different types of Button available for use at https://purplebrick.netlify.app/public/components/button/button.html are:
- standard
- outlined
- link
- icon
- floating
Cards are used to display set of information to users clubed based of relation with each other.
The different types of Card available for use at https://purplebrick.netlify.app/public/components/card/card.html are:
- Profile Card
- Dialog Card
- Product Card
- Text-overlay Card
Grid is a repsonive layout where the contents adapts as per screen size they are being viewed on.
The different types of Grid available for use at https://purplebrick.netlify.app/public/components/grid/grid.html are:
- Two column Grid
- Three Column Grid
Imagess are images, pictures on a web page. Images can be in form of a product image, a profile image, a banner etc.
The different types of Image available for use at https://purplebrick.netlify.app/public/components/image/image.html are:
- Responsive image
- Rounder image
- Circular image
Inputs are elements on UI that helps a used to enter values.
The different types of Input available for use at https://purplebrick.netlify.app/public/components/input/input.html are:
- Input Text Field
- Input Number Field
- Input Password
- Input Email
- Input Radio Button
- Input Check Box
- Input Textarea
List does what the name says, list down a set of info to the user on a web page.
The different types of List available for use at https://purplebrick.netlify.app/public/components/list/list.html are:
- Simple unordered List
- Ordered List
- Stacked List
Modals are dialog boxes that gets opens upon user interaction with a clickable item mostly a button.
The different types of Modal available for use are https://purplebrick.netlify.app/public/components/modal/modal.html
Navbar is the bar on top of sites used by users to navigate to differnt pages, or different areas of the same page.
The different types of Navbar available for use are https://purplebrick.netlify.app/public/components/navbar/navbar.html
Rating is a UI component used mostly by e-commerce sites to rate a product out of 5 starts
The different types of Rating available for use at https://purplebrick.netlify.app/public/components/rating/rating.html are:
- Filled Rating
- Outlined Rating
Sliders are used to by users to select a value from a range of number.
The different types of Slider available for use at https://purplebrick.netlify.app/public/components/slider/slider.html are:
- slider with number
- slider with icons
Toast are small popups that appears on the screen (in form of notifications) for a few second and automatically vanishes.
The different types of Toast available for use are https://purplebrick.netlify.app/public/components/toast/toast.html
- Simple Toast
- Outlined Toast
- Toast with icon
There are multiple variation of a text on web page.
The different types of Typography available for use at https://purplebrick.netlify.app/public/components/toast/toast.html are:
- Heading varients
- paragraph varients
- Gray Text
- Centered Text
Please consider leaving a star ⭐