My Website
Alert
Alerts prominently display critical, time-sensitive warnings or directions across every page so that users see it whenever they visit the site.
Primary Alert
A simple primary alert!!!
Secondary Alert
A simple secondary alert!!!
Success Alert
Order placed successfully
Danger Alert
Order cancelled
Warning Alert
Confirm payment
Avatar
An Avatar is used to display profile pictures in various social media applications.
Image Avatar
Badge
Badges are used to display status information on profile pictures and also the notification count on various icons.
Badge On Avatar
Badge with Text and Icons
Text with badge
4
Text with badge
4
Text with badge
4
Text with badge
4
Button
Buttons are the interactive elements on a web page which performs a specific action when clicked.
Solid Buttons
Outline Buttons
Link and Icon Buttons
Floating Action Button
Card
A Card is a design pattern used to show all the related data to a particular object or a product collectively and precisely.
Text Only Card
Nike
Jacket
Rs. 3500/-
Rs. 3999/-
There is no better brand than Nike - known for its functional athleisure and sportswear.
Card with badges and dismiss
Best Seller
Nike
Jacket
Rs. 3500/-
Rs. 3999/-
There is no better brand than Nike - known for its functional athleisure and sportswear.
Horizontal Card
Best Seller
Nike
Jacket
Rs. 3500/-
Rs. 3999/-
There is no better brand than Nike - known for its functional athleisure and sportswear.
Vertical Card
Best Seller
Nike
Jacket
Rs. 3500/-
Rs. 3999/-
There is no better brand than Nike - known for its functional athleisure and sportswear.
Card with text overlay
Best Seller
Nike
Jacket
Rs. 3500/-
Rs. 3999/-
There is no better brand than Nike - known for its functional athleisure and sportswear.
Image
An Image is a pictorial depection of any object or an item.
Responsive Image (Reduce the viewport width to experience the responsiveness - here Resolution switching is used)
Round Image
Input
An Input field takes a user input in various forms like a text, number, email or a password.
Email Input Field
Password Input Field
Snackbar
A snackbar is used to show feedback message. Snackbar is to used show message that need user action.
Snackbar
Live Demo
Click on the below toast buttons to open the toast.
Rating
Rating scale is used to indicate a qualitative measure with the various aspects of a product or feature.
Rating
Slider
Sliders are used to decide range for something like sound in videos, price in shopping sites.
Slider
Modal
Modals are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on modal pop-up.
Modal
Shop with exclusive offers
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Live Demo
Click on the below modal button to open the modal.
Shop with exclusive offers
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
List
Lists are used to display information in different lines with breaks unlike paragraphs which are continuous.
Ordered List
- Number
- Number
- Number
- Number
- Alphabet
- Alphabet
- Alphabet
- Alphabet
- Roman
- Roman
- Roman
- Roman
- Reverse
- Reverse
- Reverse
- Reverse
Unordered List
- item1
- item2
- item3
- item4
- item1
- item2
- item3
- item4
- item1
- item2
- item3
- item4
- item1
- item2
- item3
- item4
Stacked List
Name
example@test.com
Name
example@test.com
Name
example@test.com
Typography
Typography is the way the text is arranged and presented.
Heading
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Text Sizes
3x Large Paragraph
2x Large Paragraph
Large Paragraph
Medium Paragraph
Small Paragraph
Very Small Paragraph
Text Alignment
Left Aligned Text
Center Aligned Text
Right Aligned Text
Text Color
Text Color Primary
Text Color Secondary
Text Color Tertiary
Text Color Success
Text Color Warning
Text Color Error
Text Color Gray Light
Text Color Gray Dark
Grids
grid creates complex responsive web design grid layouts more easily and consistently across browsers.
Two Item Grid
grid item 1
grid item 2
grid item 1
grid item 2
Three Item Grid
grid item 1
grid item 2
grid item 3
grid item 1
grid item 2
grid item 3
Holy Grail Layout
Header
Nav
Article