Getting Started
Installation
HTML: Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load CSS.
CSS: Copy-paste this code on your css file.
Avatar
The Avatar component is used to represent a user, and displays the profile picture or icon.
Usage
SK
Alert
Alerts are used to communicate a state that affects a system, feature or page.
Usage
Error has occured!
You response is submitted.
This file can harm your device.
Your work is pending.
Badge
Badges are used to highlight an item's status for quick recognition.
Usage
Badge on Avatar & Icons
Card
A Card is a content container. Cards are full of interactive elements such as text, links, buttons or images.
Text in cards
Card with badges
Highlander
Men Slim Fit ShirtRs. 999
Rs. 1998
(50% OFF)
Card with dismiss
Highlander
Men Slim Fit ShirtRs. 999
Rs. 1998
(50% OFF)
Card with text overlay
Highlander
Men Slim Fit ShirtRs. 999
Rs. 1998
(50% OFF)
Images
The Image component is used to display images.
Responsive Image
Round Image
Input
The Input component is a component that is used to get user input in a text field.
TextBox
List
List component is used to display list items. It renders a ul element by default.
List without spaces
- ItemOne
- Itemwo
- ItemThree
- ItemFour
List with spaces
- ItemOne
- itemwo
- itemThree
- itemFour
Modal
A dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.
Usage
Modal Heading