To start using this component library in your project, copy the below code in your html file in head tag before all the stylesheets so that you can modify styles on your own.
<link rel="stylesheet" href="https://r-and-b-ui.netlify.app/component.css">You can click on below items in list to read about these components.
Cards are very useful as it can be used in many websites or webapps. It can be used in ecommerce websites or video library or social media website etc.
- Cards with badges
- Cards with dismiss
- E-commerce Card/Vertical Card
- Card with Text Overlay
- Card with Text Only
- E-commerce Horizontal Card
- Card with Shadow
Badges can be small circle or a number in a bubble that can tell the user of current status. Circle can be used as a profile badge to signify that if a user is online, offline or busy. Number badge can be used in notification icon or wishlist or cart icons to show how many items are there of that category.
-
Number Badge
-
Number Badge
Avatar is usually used as a profile picture.
-
Profile Avatar
-
Avatar in different sizes
-
Rounded avatar in different sizes
Alert is usually used as a notification for a user.
-
Primary Alerts
-
Secondary Alerts
Buttons are usually used for performing any action.
-
Primary Button
-
Link Button
-
Secondary Button
-
Icon Button
Alert is usually used as a notification for a user.
-
Responsive Image
-
Round Image
Inputs boxes are used to take any kind of input from the user like name, e-mail, phone number, date of birth etc.
-
Textbox Input
-
Error and validation style
Snackbar is also known as toast. It can be used for notifying user about some action or state cahnge.
-
Snackbar without action button
-
Snackbar with action button
List is a component that can be used to make a navigation bar list or a side bar.
-
Spaced List
-
Stacked List
Navbars are components of websites or web apps that can be used to help user navigate to some parts of the website or web app.
