Gorgeous White Shirt
RS.986 20%off
PD UI helps you to quickly build your projects, by focusing much on functionality and not worring about your designs.
Installation Guide
Copy and paste the stylesheet tag of your html document. So that you can style your components by just adding class names to your html elements.
Avatar
There are three types of Avatars available each with different size. There are small,medium, and large Avatar.
Responsive Image~
Images are used for good design and also used to display infromation viually.
Round Image~
This is a round image. It is shaped like a circle, usually used to display user profile.
Inputs
Inputs are used for taking some important information from the user so that we can use that information for user benefit.
Example of Inputs with Validation
Toast
Toasts are used to show pop up messages to the user. We have 3 types of toasts, success toast, warning toast, error toast.
Changes Saved
Error Has Occurred
Just A Warning
Badge
4+
4+
Link Button
Vertical Card
Cards are used to show the data which is related.
Gorgeous White Shirt
RS.986 20%off
Horizontal Card
Gorgeous White Shirt
RS.986 20%off
Card With Text
Price Details
Price (2 items)
₹500
Discount
₹200
Deliverycharge
₹50
Total Amount
₹750
You will save ₹200 on this order
Card With Text-OverLay
Card With Dismiss
Gorgeous White Shirt
RS.986 20%off
Card With Badge
Gorgeous White Shirt
RS.986 20%off
New
Forms
Lists
Lists are used in various places such as navigation bar, article page etc
We have 4 types of lists the default one than the list with circular bullets, list with square bullets and list with no bullets.
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Te@
- Milk
- Coffee
- Tea
- Milk
Example of Ordered Lists
We have 4 types of lists the default one than the list with circular bullets, list with square bullets and list with no bullets.
- List item with upper alphabets
- List item with upper alphabets
- List item with upper alphabets
- List item with lower alphabets
- List item with lower alphabets
- List item with lower alphabets
- List item with upper roman
- List item with upper roman
- List item with upper roman
- List item with lower roman
- List item with lower roman
- List item with lower roman
Spaced List
- Notification 1!
- Notification 2!
- Notification 3!
- Notification 4!
- Notification 5!
Stacked List
Notifications!!
- Anonymous followed you back.
- John Doe commented on your post.
- Raj followed you back.
- RK followed you back on Fb.
- John Doe commented on your post.
Typography
The below text utilitites can be used to make your project look awesome.
Heading-1
Heading-2
Heading-3
Heading-4
Heading-5
Example of Other Text Styles
This is small text
This is Medium text
This is Large Text
Text Strike Example!
Example of centered text
Example of text with primary color
Example of text with secondary color
Alerts
Alerts are used to attract user's attention for important information without interrupting the user's flow.
Example of Alert Bar without close button
Alerts are available in 4 types fail alert ,success alert , warning alert,primary alert. You can copy html part from below code snippet.
Fail Alert
This is an Fail alert — check it out!!!!!
Warning Alert
This is an Warning alert — check it out!!!!!
Success Alert
This is an Success alert — check it out!!!!!
Primary Alert
This is an Primary Alert — check it out!!!!!
Ratings
Slider
Example of slider with disabled
Example of slider with Icon
Example of 3 items in a Grid
Example of 2 items in a Grid