Alert
Alerts are generally used to attract user attention
we have 5 different types of alert components Primary, Secondary, Danger and Immediate action
Usage
Add the alert class with the required type of alert eg:
class="alert alert-primary"
Avatar
Avatar can be used to show user's profile picture on card,navbar and in blogs as well.
we have circular avatar available in different sizes
Usage
Add the avatar class with the required size of avatar eg:
class="avatar avatar-mdm"
(mdm here stands for medium)
Avatar Text
Text avatar can be used to show the identity in textual manner
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Avatar Overlay
To show users social links, or info on hover Note:-Use the avatar class and avatar size class on the image container
Badge
Badges are used to show status and new notifications
We have two types of badge components, notification and status badge
Usage
Add the badge class with the required type of badge eg:
class="badge badge-status badge-status-online"
class="badge badge-notification"
Card
Cards are used to show interrelated data in a single component
We have three different types of card components horizontal, vertical and card with avatar
Usage
Copy the code snippet from the required type of card, you can modify it with other utility classes as well
Horizontal Card
CSS Zero to Hero
By Quincy Larson
Vertical Card
Getting Started With CSS
By Quincy Larson
Card with avatar
Getting Started With CSS
By Quincy Larson
Card With Badge
30% off
Getting Started With CSS
By Quincy Larson
Card with Overlay
30% off
Getting Started With CSS
By Quincy Larson
Card with Close Button
Getting Started With CSS
By Quincy Larson
Text Only Card
Getting Started With CSS
By Quincy Larson
Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!
Grid
CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
We have two layouts for two and three columned grids
Usage
Add grid class with the required ratio eg:-
class="grid-col-2--20-80"
(here 20 80 after the double hyphen means the ratio of distribution of the grid items in a grid container)
2 Columns Grid (50:50)
About the course
This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch. In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.
2 Columns Grid (20:80)
About the course
This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch. In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.
3 Columns Grid (1:1:1)
About the course
This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch. In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.
Perquisites
Zeal to learn
3 Columns (1:2:2)
About the course
This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch. In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.
Perquisites
Zeal to learn
Image
Images are used to make the webapp more attractive and informative
We have responsive square and rounded images
Usage
Add the responsive image class with the type of border-radius if
required
class="box-shadow">class="image-resp border-rad-100"
Responsive Image
Round Image
Input
As the name suggests Input/textarea elements are used to take user input
We have a form component with input fields and customizable validation messages
Usage
Copy the code snippet and modify it according to your requirements
Lists
The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized or unorganized
We have styled classes for ordered list, unordered list and notification
Usage
Copy the code snippet and modify it according to your requirements Note:-use uniform classes for parent list and child list items
Ordered and Unordered List
- List Item One
- List Item Two
- List Item Three
- List Item One
- List Item Two
- List Item Three
Stacked Notification List
-
Quincy Larson replied to your comment
We can use FlexBox for Sticky Footer and Header without using positions in CSS
1 hour ago
-
Dan Abramov replied to your comment
Have you had a chance to watch the second half of my talk? I'd say quite the opposite — it's way less trickier to use suspense for data fetching than anything else (including Redux, local state, or some other library).
1 hour ago
Modal
Modal component is used to attract user's whole attention towards a single piece of information only
We have customizable login page as a modal component
Usage
Copy the code snippet and modify it according to your requirements
Rating
Rating is usually visual representation to show the quality of product/services from poor to best
Usage
Copy the code snippet and modify it according to your requirements
Read only rating
Toast
Toasts are usually created to show messages or popups on the screen for a short period of time
Usage
Copy the code snippet and use the preferred toast according to your requirements
JavaScript
Note:- do not copy paste this code snippet unless you want to modify the code
Typography
Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed
Usage
Copy the code snippet and use the text size according to your requirements