Avatar
The avatar is a small image that is used to represent a user.
Example of image avatars
Example of text avatars
AB
AB
AB
AB
Alert
Alerts are used to attract user's attention for important information without interrupting the user's flow.
Example of alerts
Badge
Badges are being used to display a notification count or status information.
Example of badges on avatars
Example of badges on icons
Card
Card are used to show user related data collectively, like product details.
Example of cards with shadow and badge.
Example of cards with dismiss and text overlay.
Example of horizontal cards.
Example of text only cards.
Something
somethings never go out of style
26/01/2022 7:40pm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas omnis porro architecto, voluptatum quia expedita magni tempore consectetur reprehenderit provident delectus corrupti quos ducimus maiores quod eaque sunt at et!
Image
Images can be responsive to fit the parent's width, and also can be customised to be round shaped.
Example of responsive images
Example of round images
Input
There are styled form fields listed below.
Example of input fields
This field is required.
Typography
Check out below text utilities.
Example of headings
something
something
something
something
something
something
Example of different text sizes
something
something
something
something
Example of texts with different colors and font weights
something
something
something
Examples of text alignments and some extra styles
something
something
something
List
List is a component that can be used to display a list of items.
Example of different types of spaced list
- Home
- Doc
- Contact
Spaced list
- Home
- Doc
- Contact
Spaced list
- Home
- Doc
- Contact
Spaced list
- Home
- Doc
- Contact
Spaced list
Example of stacked list
- Home
- Doc
- Contact
stacked list
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.
Example of modal
Toast
Toasts are positioned over everything else in the document and remove scroll from the page. It gets closed only with close button on toast pop-up.
Example of toasts
Success!
Failed!
checking!
Grid
Grid is a layout system that allows you to create responsive layouts.
Example of grid layout with two columns
Grid 1
Grid 2
Example of grid layout with three columns
Grid 1
Grid 2
Grid 3