How to use Components
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
Avatar
Avatars is used for profile pictures. by using following avtar component your devlopement made easy. The avatar component has 4 different sizes xtra-small, small, medium and large.
Avtar with images
Avtar with Text Initials
Badge
Use the Badge Component Symbol to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it.
Avatar component with badge with diffrent sizes
circle
circle
circle
circle
Badge on Icon
home 2
notifications4
shopping_cart18
email5
Badge on Button
Alerts
Alert messages used to inform the user about something You done and resopnce on that like : danger, success, information or warning.
Alert with text, link and icon.
Button
Buttons are also called as call to action. We have range of buttons and their states to choose from.
Solid Buttons
Solid Buttons with Outline
Link Buttons
Icon Buttons
Floating action Button
Card Components
A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.
verticle Card with badges
Simple Feature card
Payment feature
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt, earum!
read moreCards with text overlay
Text Only Card
Horizantal Card
Vertical Dismiss Card
Image
Images are used for showing profile picture and some pictorial information
Responsive Image
Round Image
Input
The input element represents a typed data field, usually with a form control to allow the user to enter the data,edit the data.The type attribute controls the data type (and associated control) of the element
Form: Input Components with Error Validation
Text-Utilities
Text utilities are used for text alignment, styles and overflow things.
Headings
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
Small text, Grey Text
This is a large size paragraph
This is a medium size paragraph
This is a small size paragraph
This is a large size paragraph
This is a medium size paragraph
This is a small size paragraph
Text with alignments
Text Align Left
Text Align Center
Text Align Right
List
Lists are continuous, vertical indexes of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.Lists can be used at so many places, navigation bar, stacked notifications, article pages, etc.
Spaced Lists
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Stacked Lists with title & text
-
List Item 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, praesentium.
-
List Item 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, praesentium.
-
List Item 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, praesentium.
-
List Item 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, praesentium.
Stacked Lists with title only
-
List Item 1
-
List Item 2
-
List Item 3
Rating
Rating can be used to allow the users to share their opinion about the product, documentation page, photo and more.
Navigation Bar
A navigation bar is a navigation header that is placed at the top of the page. which is used for navigating through the webpage.