Heading
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium fugiat omnis quos aliquid odio necessitatibus qui, doloremque sapiente illo,
« Cheet Css ∋
How to use it ?
To use it just include the given link inside the head tag
Alert
An alert is use to displays a important message to attracts the user's attention without interrupting the user's task.
Simple Alert
A danger alert example
A sucess alert
A inforamtion alert example!!!!
A warning alert example!!!
Alert with close button
An info alert example
An info alert example
Avatar
An image used as a user's profile picture, usually in a circular shape. giving a user an coustomize identity in app & help to tell users from which account they have login .
Avatar with image
Text Avatar
Badge
Badges can be used as part of links or buttons , ecommerce to grap user attention using position absolute , relative properties it has been created .
Badge Telling user status
Badge on Icon
Buttons
The standard way of redirecting the user from one page to another . Button can be various type floating , link , outline , pop up etc .
Simple Button
Outline Button
Link Button
Icon Button
Floating Button
Card
Cards are means of displaying content composed of different types of objects like photos with captions of variable length , card having buy now like option , info card , testimonial card
Card with text only
Heading
Sub-Heading
Lorem ipsum dolor sit amet, consectetur. Dolorum atque aspernatur in soluta beatae debitis ad illo sed id velit?
Card with Badge
Deep work
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem a quasi autem.
₹ 543
₹ 600 43%
TRENDING
Card with dismiss
Deep work
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem a quasi autem.
₹ 543
₹ 600 43%
TRENDING
✗
Card with text overlay
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos nihil tempora alias?
₹ 543
₹ 600 43%
Card with shadow
Heading
Sub-Heading
Lorem ipsum dolor sit amet, consectetur. Dolorum atque aspernatur in soluta beatae debitis ad illo sed id velit?
Horizontal card
Input
Input are mainly use to take data form user & provide use full data according to it . Get user data enable a developer to understand their user
Validation and errors style
Input errors
Please Enter Correct Email.
Other input type
TextArea
Date
Option
Radio button
Please select your age range :
Checkbox
Text area , Date , Option
Radiobutton , Checkbox
Grid
Grid mostly use to control the layout in two dimensions. In mostly complex & fix layout it can be preferred over flex box
Grid-2: two items in a grid
Grid-3: three items
You can place three items in the 3-column grid
The city
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ut doloribus quas.
Image
Responsive Image
Rounded Image
Modal
When we want user to read the message properly then we can use it . It is also usefull when we want to prevent unnecessary clicks on buttons
Lists
List tag are mostly use when there is a group or a set of data to display user data on frontend we use it
Spaced List
- Item One
- Item Two
- Item Three
- Item Four
- Item Five
List Heading
Stacked Notification
-
15m
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus magnam nisi fugit.
-
25m
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus magnam nisi fugit.
Rating
5 star rating
Use to take feed back from user
Js code
Toast
2 sec toast
will disappear in 2 second
Text Utilities
Heading tag coustomize
main heading
subheading
subheading heading
normal heading
noraml heading
noraml heading
Text size
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Text alignment
Align Left
Align Center
Align Right
Text Colors
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.e
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.
Lorem, ipsum dolor.