Installation

To use SlateUI in your project, copy the CDN link and paste it in the head of the HTML file of your project. OR Can Import the File in your project by using the following command:

@import "https://slateui.netlify.app/css/components.css";

Installation Guide Code example

Alert

Alerts are used to attract user's attention for important information without interrupting the user's flow.

Alerts are available in 5 types- success alert, error alert, warning alert, primary alert, secondary alert. To use this alert just use class name alert-box and also add class according to alert type- alert-primary, alert-secondary, alert-danger, alert-success, alert-warning. (e.g.class="alert-box alert-primary"). You can copy html part from below code snippet.

A primary alert example with a text link. Check it out
A secondary alert example.
check_circleA success alert example.
dangerousA danger alert example.
warning A warning alert example.
Alert code example

Avatar

Avatar is used to display user's profile picture. It is available in four different types- circle and square. Avatar can be used to show user's profile picture on profile information page, on navigation bar, in blogs grid items

Avatar is available in 4 different sizes. You can use image in Avatar. You need to include class avatar and for size add class according to size avatar-lg-size, avatar-md-size, avatar-sm-size, avatar-xs-size (e.g. class="avatar avatar-lg-size") Don't forget to add Responsive Image class names for img element. Example of Text Avatar You can use initial letters of user in Avatar as well. You need to include class avatar-text along with avatar and size class. (e.g. class="avatar avatar-lg-size avatar-text")

avatar
avatar
avatar
avatar
PP
PP
PP
PP
Avatar code example

Badge

Badges are being used to display a notification count or status information

We have 2 types of status badges that can be integrated with Avatars. You can show colors to show the online status of user. And to show cart or notification count, you can use number badge. Check code below to copy the html part as is. We have multiple sizes of text-badges for using these you can use text-badge-large, text-badge-medium-large, text-badge-medium, text-badge-small, text-badge-medium-very-small classes.

avatar
avatar
avatar
avatar
shopping_cart
5
favorite_border
99+
Badge code example

Button

Buttons are used to trigger and action by clicking on them.

Example of Buttons Example of Primary Button Styles Whenever you want your user to click on a link or button, use primary style buttons. Example of Secondary Button Styles If you want user not to pay attention to buttons then use Secondary buttons. Example of Button with icon and Floating action Button Button with icon can be used in cards to complete the UI. For class and html, check below code. Floating-action buttons can be customized by adding the font-awesome icon of your choice.

Link
Button code example

Card

Cards contain content and actions about a single subject. Cards are surfaces that display content and actions on a single topic.

Example of Cards Example of Horizontal Cards Horizontal cards contains the content and actions about a single subject. Cards are surfaces that display content and actions on a single topic.It focuses on the content, while presenting actions inline with the content. Example of Vertical Cards Vertical cards contains the content and actions about a single subject. Cards are surfaces that display content and actions on a single topic.It focuses on the content, while presenting actions in column form with the content.

demo
Women Stylish Pencil Heel Sandal with Trendy Colour
₹ 699
₹ 1499
53% off
demo close
Women Stylish Pencil Heel Sandal with Trendy Colour
₹ 699
₹ 1499
trending_up Trending
53% off
Cards code example

Image

Images can be responsive to fit the parent's width, and also can be customized to be round shaped

Example of Responsive Images You can add class responsive-image to make your image fit the width of container. It's height will get adjusted by keeping the aspect ratio same. If you want to change the aspect ratio, you will have to crop the image Example of Responsive Images It's height will get adjusted by keeping the aspect ratio same, use class class="responsive-image" to make image responsive. Example of Round Images round images can be added by adding class class="round-image" to the image.

scorpio scorpio scorpio
Image code example

Input

Input let users enter and edit text.

Example of Inputs Inputs are used to collect data from the user. They are used to collect text, numbers, and other data. There are different type of Input that we can use to collect data such as calander to collect date, text to collect text, number to collect number, etc.

Price Low to height Price height to low Slider
Inputs code example

Lists

A list is a series of items, grouped together, separated by some delimiter. It can be used at so many places, navigation bar, stacked notifications, article pages, etc.

Add class according to bullet style. Copy html code below and add your desired list items.

  • Item-1
  • Item-2
  • Item-3
  • Item-1
  • Item-2
  • Item-3
  • Item-1
  • Item-2
  • Item-3
  • Item-1
  • Item-2
  • Item-3
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with numbers
  2. List item with numbers
  3. List item with numbers
  1. List item with lower alphabets
  2. List item with lower alphabets
  3. List item with lower alphabets
  1. List item with upper alphabets
  2. List item with upper alphabets
  3. List item with upper alphabets
  1. List item with lower roman
  2. List item with lower roman
  3. List item with lower roman
  1. List item with upper roman
  2. List item with upper roman
  3. List item with upper roman
List code example

Text Utils (Typography)

Check out below text utilities.

For heading u can use h1, h2, h3, h4, h5, h6 elements. The same font-styling is present for class names h1, h2, h3, h4, h5, h6 class. You can add one of these classes to style the text.

Heading-1
Heading-2
Heading-3
Heading-4
Heading-5
Heading-6
This is bold text
This is stricked text
This is extra small text
This is gray text
This is center text
Typography code example

Navigation

Navigation is a component that is used to navigate between different pages.

Navigation can contain links, buttons, icons, and other elements, and when clicked on will navigate to a different page or section of the application.

Navbar code example

Modal

Model is a component that is used to display a modal window. Modal can be used to display a confirmation or a information

Example of Model The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

Modal code example

Rating

Ratings are used to indicate the rating of a product or service.

Ratings are used to indicate the rating of a product or service.

Mood Rating

mood
sentiment_satisfied
mood_bad

Star Rating

Rating code example

Grid

Grid can be used to create different responsive layouts and to align elements.

Example of Grids There are different type of grids available in the grid component and are used to create different layouts . some of examples are as follows: 50:50 GridsAlert 50:50 Grids are used to create equal width and height grids. use the following code to create 50:50 grids. class="grid-50-50" 70:30 Grids 70:30 Grids are used to create 70% width and 30% height grids. use the following code to create 50:50:50 grids. class="container-70-30" 30:70 Grids 30:70 Grids are used to create 30% width and 70% height grids. use the following code to create 50:50:50 grids. class="container-30-70"

Item-1
Item-2
Item-1
Item-2
Item-1
Item-2
Grid code example

Toast

Alerts are used to attract user's attention for important information without interrupting the user's flow.

This component can be used for toast or snackbar component. Toast is mostly used to show feedback message. Snackbar is to used show message that need user action .

This is an example of success toast close
This is an example of warning toast close
This is an example of error toast close
Toast code example