Components
Alerts
Alerts are used to attract user's attention for important information without interrupting the user's flow.
Avatars
Avatar can be used to show user's profile picture on user profile information page
Text Avatar
Badge
Badges are being used to display a notification count or status information.
Badge on Buttons
Badge on Icons
Badge on Avatars
Cards
Card are used to show user related data collectively, like product details.
basic Card
card with text overlay
HP
HP 14s-dr2512TU
HP 14s-dr2512TU 11th Gen Core i3 Windows 11 Home Laptop (8GB RAM, 256GB SSD, Intel UHD Graphics, MS Office, 35.60 cm, 536B6PA#ACJ, Silver)
text only card
Horizontal card
card with Badge
Images
Images are the important aspects of any website. HTML provides us img tag with help of that we can put images on web page.
Responsive Image
Responsive Image is a image which will have width and height inherited from its parents element.Responsive Images are used to display Images on websites, which are screen responsive.
Rounded Image
Round Images are circular images with border-radius 50% and its width and height is inherited from its parents.
Inputs
Inputs are necessary for user interaction with the website. Inputs are used to take information from the user
Ratings
Ratings are used to display reviews.
Toast
This component can be used for toast or snackbar component. Toast is mostly used to show feedback message. Snackbar is to used show message that need user action
Retry in 5 seconds.
RETRYTypography
Check out the below text utilities
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This is paragraph text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices quis sem eu congue. Nullam id risus metus. Proin aliquam et dui ac condimentum. Mauris gravida vulputate orci ut aliquam. Sed sollicitudin feugiat ex, id lobortis libero ullamcorper ut. Suspendisse potenti. Phasellus sed nisi pharetra, sagittis sapien vel, semper nulla
Some more texts
This line of text is meant to be no longer accurance
Text with bold font weight
Text with light font weight
grey text can be used for subtitle
italic text
Modal
A modal is a web page element that displays in front of and deactivates all other page content. Modals are often used to direct user's attention to an important action or piece of information on a website
Confirmation
✖Are you sure you want to delete account? this action cannot be undone
List
HTML lists allow web developers to group a set of related items in lists.
Normal lists
Unordered and Ordered List
- List 1
- List 2
- List 3
- List 4
- List 1
- List 2
- List 3
- List 4
- List item 1
- List item 1
- List item 1
- List item 1
Stacked (Notification Page)
-
John
johnt@gmail.com
-
Tom John
tomjohn@gmail.com
-
John Tom
johntom@gmail.com
Grid
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages
Two items in grid
Three items in grid
Drawer
The drawer component is a slide-in element that can be used to display relevant information without losing the context of the page
Title
SubtextInbox
Star
Sent mails
Draft
Slider
The Sliders are used to allow users to select the values in range.
Simple slider
Slider for volume