Avatar
Avatar can be used to display small profile picture of user.It can also be used to display text as profile picture if image is not available.
Image Avatar
Text Avatar
PG
PG
PG
PG
Icon Avatar
Alert
Alert used to display important message to user.
Badges
Badge comes above icon or image to give graphical representation of data to user.
Avatar badge
Text badge
Image
Image is helpful to display graphical image on webpage.
Responsive Image
Square Image
Rounded Image
Input
Input components lets user type or give input.
Input text
Input range & date
Input outline
Card
Card helps you to display information in card format.
Free
Typography
Typography provides utility classes which can be used to format text.
Text Heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Text Boldness
Black
Bold
SemiBold
Regular
Light
Text Color
Primary
Secondary
Accent
Grey
White
Text Align
Center text
Toast
Toast helps to display content that disapper after some time.
Hello, this is toast message.
Hello, this is toast message.
List
List used to display related content in vertical list format.
Normal List
- Item 1
- Item 2
- Item 3
- Item 4
Stacked(Notification) List
-
hi, this is notification 1 from user.
-
hi, this is notification 2 from user.
-
hi, this is notification 3 from user.
Rating
Rating used to display user feedback in form of star
Rating icon
Rating text
Modal
Modal provides layout which used to give information to user and required action from user.
Heading
Grid
Grid is useful in laying out content and make it easy to adapt to different screen sizes.
Grid two column
Item 1
Item 2
Item 3
Item 4
Grid three column
Item 1
Item 2
Item 3
Item 4
Grid responsive
Item 1
Item 2
Item 3
Item 4