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
Import this code in CSS file :
@import url('https://agri-component.netlify.app/css/components.css');
OR
Link this CSS file in HTML File :
<link rel="stylesheet" href="https://agri-component.netlify.app/css/components.css"/>
view raw CSS Main CL hosted with ❤ by GitHub

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
<!-- Primary Alerts Examples -->
<div class="alert primary-alert">A primary alert example with a text link. <span
class="link link-active">Check
it out</a><span>
</div>
<!-- Secondary Alerts Examples -->
<div class="alert secondary-alert">A secondary alert example.</div>
<!-- Success Alerts Examples -->
<div class="alert success-alert"><span class="alertmi material-icons">check_circle</span>A success
alert
example.
</div>
<!-- Danger Alerts Examples -->
<div class="alert danger-alert"><span class="alertmi material-icons">dangerous</span>A danger alert
example.
</div>
<!-- Warning Alerts Examples -->
<div class="alert warning-alert"><span class="alertmi material-icons">warning</span> A warning alert
example.
</div>
</div>
view raw Alerts hosted with ❤ by GitHub

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
<div class="avatar">
<div class="avatar lg-avatar-size"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img /> </div>
<div class="avatar md-avatar-size"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img /> </div>
<div class="avatar sm-avatar-size"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img /> </div>
<div class="avatar xs-avatar-size"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img /></div>
</div>
<div class="text-responsive">
<div class="avatar lg-avatar-size text-round">PP</div>
<div class="avatar md-avatar-size text-round">PP</div>
<div class="avatar sm-avatar-size text-round">PP</div>
<div class="avatar xs-avatar-size text-round">PP</div>
</div>
</div>
view raw Avatar hosted with ❤ by GitHub

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
<div class="badge-ui">
<!-- large image with online badge -->
<div class="badge-ui lg-avatar-size badge-status"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img />
<span class=" badge lg-badge badge-online"></span>
</div>
<!-- medium image with offline badge -->
<div class="badge-ui md-avatar-size badge-status"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img />
<span class=" badge md-badge badge-offline"></span>
</div>
<!-- small image with ready badge -->
<div class="badge-ui sm-avatar-size badge-status"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img />
<span class=" badge sm-badge badge-away"></span>
</div>
<!-- extra small image with blue badge -->
<div class="badge-ui xs-avatar-size badge-status"> <img src="/images/scorpio-sign.jpg" alt="avatar"
class="image-round image-responsive"><img />
<span class=" badge xs-badge badge-offline"></span>
</div>
</div>
<div class="number-badges-container">
<div class="shopping__cart">
<span class="material-icons badgemi">
shopping_cart
</span>
</div>
<span class="number-badge lg-number-badge">5</span>
<div class="favorite_border">
<span class="material-icons badgemi">
favorite_border
</span>
</div>
<span class="number-badge lg-number-badge">99+</span>
</div>
view raw Badges hosted with ❤ by GitHub

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
<div class="btn btn-solid">
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<a href="/" class="btn-link">Link</a>
</div>
<div class="btn btn-outline">
<button class="btn btn-primary-outline">Primary</button>
<button class="btn btn-secondary-outline">Secondary</button>
<button class="btn btn-success-outline">Success</button>
<button class="btn btn-warning-outline">Warning</button>
<button class="btn btn-danger-outline">Danger</button>
</div>
<div class="btn btn-with-icons">
<button class="btn btn-success icon">
Cart
<span class="material-icons buttonmi"> shopping_cart </span>
</button>
<button class="btn btn-danger icon">
Wishlist
<span class="material-icons buttonmi"> favorite_border </span>
</button>
<button class="btn-lg-icon add">
<span class="material-icons buttonmi"> add </span>
</button>
<button class="btn-lg-icon remove">
<span class="material-icons buttonmi"> remove </span>
</button>
</div>
view raw Buttons hosted with ❤ by GitHub

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
<div class="horizontal-card">
<img
class="horizontal-card__image"
src="https://i.ibb.co/SRn0LwX/icons8-html-5-480.png"
alt="image"
/>
<div class="horizontal-card__content">
<h2 class="horizontal-card__title">HTML Rice</h2>
<h3 class="horizontal-card__price">$5000</h3>
<p class="horizontal-card__description">
This is Rice is purely crafted and grown organically.
</p>
<h3 class="horizontal-card__ratings">5 Star</h3>
<h4 class="horizontal-card__stock">Stock: InStock</h4>
</div>
<div class="horizontal-card__add-to-cart">
<button class="btn btn-primary icon">
Add to Cart
<span class="material-icons buttonmi"> shopping_cart </span>
</button>
</div>
<div class="horizontal-card__add-to-wishlist">
<button class="btn btn-success icon">
Add to Wish
<span class="material-icons buttonmi"> favorite_border </span>
</button>
</div>
</div>
<!-- Horizontal card with out of stock and no image -->
<div class="horizontal-card">
<!-- <img
class="horizontal-card__image"
src="https://i.ibb.co/SRn0LwX/icons8-html-5-480.png"
alt="image"
/> -->
<div class="horizontal-card__content">
<h2 class="horizontal-card__title">HTML Rice</h2>
<h3 class="horizontal-card__price">$5000</h3>
<p class="horizontal-card__description">
This is Rice is purely crafted and grown organically.
</p>
<h3 class="horizontal-card__ratings">5 Star</h3>
<h4 class="horizontal-card__stock">Stock:No Stock</h4>
</h4>
</div>
<div class="horizontal-card__add-to-cart">
<button class="btn btn-primary icon" disabled>
Add to Cart
<span class="material-icons buttonmi"> shopping_cart </span>
</button>
</div>
<div class="horizontal-card__add-to-wishlist">
<button class="btn btn-success icon" disabled>
Add to Wish
<span class="material-icons buttonmi"> favorite_border </span>
</button>
</div>
</div>
<!-- Vertical Card with icons -->
<div class="vertical-card">
<img
class="vertical-card__image"
src="https://i.ibb.co/SRn0LwX/icons8-html-5-480.png"
alt="image"
/>
<div class="vertical-card__content">
<h2 class="vertical-card__title">
HTML Rice
<span class="material-icons cardmi" title="Authentic Product">
check_circle
</span>
</h2>
<h3 class="vertical-card__price">$5000</h3>
<p class="vertical-card__description">
This is Rice is purely crafted and grown organically.
</p>
<h3 class="vertical-card__ratings">5 Star</h3>
<h4 class="vertical-card__stock">Stock: InStock</h4>
<div class="vertical-card__buttons">
<div class="vertical-card__add-to-cart">
<button class="btn btn-primary icon">
Add to Cart
<span class="material-icons buttonmi"> shopping_cart </span>
</button>
</div>
<div class="vertical-card__add-to-wishlist">
<button class="btn btn-success icon">
Add to Wish
<span class="material-icons buttonmi"> favorite_border </span>
</button>
</div>
</div>
</div>
</div>
view raw Cards hosted with ❤ by GitHub

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
<img class="image-item responsive-image" src="/imagepath" alt="image">
<img class="image-item round-image" src="/imagepath" alt="image">
view raw Images hosted with ❤ by GitHub

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
<input class="input__field" type="text" name="name" placeholder="Name" required />
<input class="input__field" type="email" name="email" placeholder="Email" required/>
<input class="input__field" type="tel" name="telnumber" inputmode="numeric" pattern="[0-9]*" placeholder="Phone Number" required />
<input class="input__field" type="password" name="input password" placeholder="Password" required minlength="6"/>
<input class="input__field" type="submit" name="input submit" required />
view raw Input hosted with ❤ by GitHub

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
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
<ul class="list-style-circle">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
<ul class="list-style-square">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
<ul class="list-style-none">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
</div>
<div class="ordered-list-examples">
<!-- This is default list -->
<ol>
<li>List item with numbers</li>
<li>List item with numbers</li>
<li>List item with numbers</li>
</ol>
<ol class="list-style-decimal-leading-zero">
<li>List item with numbers</li>
<li>List item with numbers</li>
<li>List item with numbers</li>
</ol>
<ol class="list-style-lower-alphabets">
<li>List item with lower alphabets</li>
<li>List item with lower alphabets</li>
<li>List item with lower alphabets</li>
</ol>
<ol class="list-style-upper-alphabets">
<li>List item with upper alphabets</li>
<li>List item with upper alphabets</li>
<li>List item with upper alphabets</li>
</ol>
<ol class="list-style-lower-roman">
<li>List item with lower roman</li>
<li>List item with lower roman</li>
<li>List item with lower roman</li>
</ol>
<ol class="list-style-upper-roman">
<li>List item with upper roman</li>
<li>List item with upper roman</li>
<li>List item with upper roman</li>
</ol>
view raw Lists hosted with ❤ by GitHub

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
<div class="h1">Heading-1</div>
<div class="h2">Heading-2</div>
<div class="h3">Heading-3</div>
<div class="h4">Heading-4</div>
<div class="h5">Heading-5</div>
<div class="h6">Heading-6</div>
<div class="bold-text">This is bold text</div>
<div class="striked-text">This is stricked text</div>
<div class="small-text">This is extra small text</div>
<div class="gray-text">This is gray text</div>
<div class="center-text">This is center text</div>
view raw Typography hosted with ❤ by GitHub

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
<nav class="navigation-menu">
<div class="navigation__left">
<div class="navigation__logo">Agri UI</div>
</div>
<input type="search" class="navigation__input" placeholder="search item" />
<div class="navigation__right">
<span class="material-icons navigationmi"> store </span>
<div class="navbadge">
<span class="material-icons navigationmi"> favorite</span>
<span class="nav__number-badge">5</span>
</div>
<div class="navbadge">
<span class="material-icons navigationmi"> shopping_cart </span>
<span class="nav__number-badge">5</span>
</div>
<span class="material-icons navigationmi"> account_circle</span>
</div>
</nav>
<!-- only used for responsive design -->
<header class="header-responsive">
<div class="header__logo-responsive">AgriUi</div>
<input class="header__input-responsive" type="search" placeholder="search items" />
</header>
view raw Navbar hosted with ❤ by GitHub

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
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>this is a demo model example</p>
</div>
</div>
<!-- JS Code -->
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
view raw Modal hosted with ❤ by GitHub

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
<h4>Mood Rating</h4>
<div class="rating">
<div class="good-rating" title="Good"><span class="material-icons ratingmi">
mood
</span>
</div>
<div class="average-rating" title="Average"><span class="material-icons ratingmi">
sentiment_satisfied
</span>
</div>
<div class="bad-rating" title="Bad"> <span class="material-icons ratingmi">
mood_bad
</span>
</div>
</div>
<h4>Star Rating </h4>
<div class="star-rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
view raw Rating hosted with ❤ by GitHub

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
<div class="grid-50-50">
<div class="item1">Item-1</div>
<div class="item2">Item-2</div>
</div>
<div class="grid-30-70">
<div class="item1">Item-1</div>
<div class="item2">Item-2</div>
</div>
<div class="grid-70-30">
<div class="item1">Item-1</div>
<div class="item2">Item-2</div>
</div>
view raw Grids hosted with ❤ by GitHub

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
<div class="success-toast">This is an example of success toast
<span class="material-icons toastmi">
close
</span>
</div>
<div class="warning-toast">This
is an example of warning toast
<span
class="material-icons toastmi">
close
</span>
</div>
<div class="error-toast">
This is an example of error toast
<span class="material-icons toastmi">
close
</span>
</div>
view raw Toast hosted with ❤ by GitHub