Site-status:
In order to use the components of Speed CL in your project, just copy paste the stylesheet <link> in the <head> tag of your html document, above all other stylesheets.
<link rel="stylesheet" href="https://speed-cl.netlify.app/main.css" />- video of the website
Avatar is used to display the image of a user.
There are different types of Avatars present in the library.
- Large Avatar
- Medium Avatar
- Small Avatar
- Avatar with text
Alert is used to display important message to the user.
There are different types of Alerts present in the library.
- Primary Alert
- Success Alert
- Danger Alert
- Warning Alert
- Alert with close button
Badge is used to display the status(online/offline/away/busy) of the user or for notification count.
There are different types of Badges present in the library.
- Badges on Avatars
- Badges on Icons
Buttons are used to make a web app interactive and to make user take an action.
There are different types of Buttons present in the library.
- Primary Button
- Outlined Button
- Link Button
- Icon Button
- Floating Button
Card is essentially used in ecommerce or video library or social media regarding one piece of information.
There are different types of Crads present in the library.
- Card with badge
- Card with dismiss
- Text overlay Card
- Text only Card
- Horizontal Card
- Card with shadow
- Ecommerce product Card
- Ecommerce cart Card
- Ecommerce bill Card
Grid is used to divide a web page into sections.
There are two items and three items grid present in the library.
- Two Items(2x2) Grid
- Three Items (3x3) Grid
Image is used to display large image on the website.
There are different types of Images present in the library.
- Responsive Image
- Circle Image
Input is used to ask a piece a piece of information from the user.
There are different types of Inputs present in the library.
- Basic Input
- Error Input
List is used to display choices inside a heading to the user.
There are different types of List present in the library.
- Spaced List
- Stacked List
Modal is used to ask an action among choices from a user.
There is a single modal present in the library.
- Simple Modal
Navigation is used to navigate to different sections or pages of a website.
There are different types of Navigation present in the library.
- Simple Navigation
- Navigation with submenu
- Navigation with a hamburger
Rating is used to ask a rating or a service or product from a user.
There is a single rating present in the library.
- Simple Rating
Slider is used to display items present in its range to the user.
There is a single slider present in the library.
- Simple Slider
- Styled Slider
- Vertical Slider
Text-utilities is used to format text in a website.
There are different types of Typography examples present in the library.
- Heading
- Small text
- Alignment
- Additional styles
Toast is used to display a notification to the user because of the action he took.
There is a single toast present in the library.
- Simple Toast