Usage
In order to start using the components in your project, import the stylesheet in your CSS or HTML file.
@import url("https://shed-ui.netlify.app/component.css");
<link rel="stylesheet"
href="https://shed-ui.netlify.app/component.css">
To get the Font Awesome Icons, import the following link tag of your project.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css">
You can also import individual components if you only need a few of them. The links to import individual components can be found in their respective pages.
Payment was Successful
User not found !
We are going Live !
<div role="alert" class="alert variant al-success">
<div class="alert-icon">
<img class="icon" src="/assets/alert-success.svg" alt="alert-icon"">
</div>
<div class="alert-content">
<span class="alert-message">Success</span>
<p class="alert-details">Payment was Successful</p>
</div>
</div>
<!-- For Error and Info Alert, Replace class name "al-success" with "al-error" or "al-info" and replace the respective icon in "alert-icon" -->
Warning ALert
Seems your account is about expire, upgarde now.
<div role="alert" class="alert al-warning">
<div class="alert-icon">
<img class="icon" src="/assets/alert-warning.svg" alt="alert-icon"">
</div>
<div class="alert-content">
<p class="alert-details">Seems your account is about expire, upgarde now.</p>
</div>
</div>
Different size avatar's class name's are : "size-sm","size-md","size-lg","size-xl","size-2xl" . To use this, replace class name "size-sm" to "size-md" or respective size.
<div class="avatar-container size-sm " >
<img src="https://bit.ly/prosper-baba" alt="avatar of Prosper Otemuyiwa">
</div>
<div class="avatar-container size-2xl" >
<img src="https://bit.ly/kent-c-dodds" alt="avatar of Kent C Dodds">
</div>
Square Avatar
<div class="avatar-container avatar-sq size-sm" >
<img src="https://bit.ly/prosper-baba" alt="avatar of Prosper Otemuyiwa">
</div>
<div class="avatar-container avatar-sq size-2xl" >
<img src="https://bit.ly/kent-c-dodds" alt="avatar of Kent C Dodds">
</div>
Text Avatar
Text Avatar is in 3 different size: "sm","md","lg"
SD
NG
TP
<div class="avatar-container size-sm txt-avatar flex">
<span>SD</span>
</div>
<div class="avatar-container size-md txt-avatar flex">
<span>NG</span>
</div>
<div class="avatar-container size-lg txt-avatar flex">
<span>TP</span>
</div>
Badge
Badge Component also has different sizes: "badge-sm","badge-md","badge-lg","badge-xl","badge-2xl".
<div class="avatar-container size-sm">
<img class="avatar-circle" src="https://bit.ly/prosper-baba" alt="avatar of Prosper Otemuyiwa">
<i class="avatar-badge badge-sm "></i>
</div>
<!-- To try different badge size replace class name "badge-sm" to respective different badge size class name. -->
<div class="avatar-container size-2xl" >
<img class="avatar-circle" src="https://bit.ly/kent-c-dodds" alt="avatar of Kent C Dodds">
<i class="avatar-badge badge-2xl"></i>
</div>
Icon Badge
<div class="badge-icon">
<i class="icon fas fa-shopping-cart avatar-circle"></i>
<span class="flex badge">1</span>
</div>
<div class="badge-icon" >
<i class="icon far fa-envelope avatar-circle"></i>
<span class="flex badge">2</span>
</div>
Outline Button
<button class="btn btn-sm outline">Primary color</button>
<button class="btn btn-sm outline success ">Success</button>
<button class="btn btn-sm outline danger ">Danger</button>
Floating Button
<div class="floating-btn-container">
<button class="btn btn-md float-btn"><i class="icon fas fa-plus"></i></button>
<div class="floating-items hidden">
<button class="btn btn-md floating-item"><i class="icon fas fa-paperclip"></i></button>
<button class="btn btn-md floating-item"><i class=" icon fas fa-arrow-down"></i></button>
<button class="btn btn-md floating-item"><i class="icon fas fa-map-marker-alt"></i></button>
</div>
</div>
Card
Mar 25,2022
Design
Accessibility tools for designers and developers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nostrum quis blanditiis at excepturi veritatis laborum cupiditate et aliquid molestiae?
<div class="relative card-container">
<div class="card-header flex">
<span>Mar 25,2022</span>
<a class="link flex btn-xs" href="#">Design</a>
</div>
<div class="card-content">
<h1 class="title">Accessibility tools for designers and developers</h1>
<p class="card-description" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nostrum quis blanditiis at excepturi veritatis laborum cupiditate et aliquid molestiae?</p>
</div>
<div class="card-footer flex">
<button class="btn btn-xs">Read More</button>
<div class="card-author-box flex">
<img class="avatar-circle size-xs" src="https://rb.gy/fjwtsq" alt="avatar of Wes Bos">
<span>Wes Bos</span>
</div>
</div>
</div>
Vertical Card
the office
Would you rather be feared or loved?
<div class="vertical-card overflow-hidden">
<div class="card-header">
<div class="img-container">
<img class="w-100 h-100" src="https://vistapointe.net/images/the-office-us-4.jpg" alt="product-image">
</div>
</div>
<div class="card-content p-1">
<div class="card-title txt-md lt-bold">the office</div>
<div class="card-description txt-sm">
Would you rather be feared or loved?
</div>
<div class="card-footer">
<div class="w-100 card-btn-container">
<button class="btn btn-sm cta-btn w-100quiz-cta-btn">Play</button>
</div>
</div>
</div>
</div>
Badge Card
You Save 80%
boAt Rockerz 550
Rs. 1,999.00
<div class="badge-card">
<div class="my-badge">You Save 80%</div>
<div class="card-header card-img">
<img src="https://rb.gy/csnlne" alt="product image of boat headphone">
</div>
<div class="card-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="card-description">
<div class="title">boAt Rockerz 550</div>
<span class="price" >Rs. 1,999.00</span>
</div>
<div class="card-clr-variant">
<li class="bg-primary" ></li>
<li class="bg-black"></li>
<li class="bg-teal" ></li>
</div>
<button class="btn btn-sm">View Product</button>
</div>
</div>
Product card
Roadster
Red Plum layered sweatshirt Hoodie
₹799
₹1499
<div class="product-card-container">
<div class="flex w-100 relative product-card">
<div class="w-100 h-100 relative product-header">
<div class="flex wishlist-badge"><i class="icon sidze-xs fa-regular fa-heart"></i></div>
<div class="w-100 relative product-img-container">
<img class="w-100 h-100 absolute inset"
src="https://images.bewakoof.com/t320/orchid-petal-basic-hoodies-454624-1640779904-1.jpg"
alt="product image of boat headphone"
/>
</div>
<div class="btn-container hover-cart-btn-container ">
<button class="w-100 btn btn-sm flex cart-btn">Add To Cart</button>
</div>
</div>
<div class="w-100 product-content">
<span class="product-title lt-bold">Roadster</span>
<div class="product-description lt-bold">
Red Plum layered sweatshirt Hoodie
</div>
<div class="ratings">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
</div>
<div class="relative flex product-price-details">
<span class="product-price">₹799</span>
<span class="strike-txt og-price txt-grey">₹1499</span>
</div>
</div>
<div class="w-100 product-footer">
<div class=" btn-container mobile-cart-btn-container">
<button class="w-100 btn btn-xs cart-btn">Add to Cart</button>
</div>
</div>
</div>
</div>
Horizontal-card
Apple iPhone 12 (64GB) - White
₹ 56,999
₹65,999
Save ₹8,901 (14%)
10% Off on Indusind bank ltd. Cards
Get it by Tomorrow 3PM
FREE Delivery by Amazon
<div class="horizontal-card">
<div class="flex card-header">
<img class="" src="https://rb.gy/ykbitg" alt="Iphone 13 Image">
</div>
<div class="card-content">
<div class="title">Apple iPhone 12 (64GB) - White</div>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div class="card-description">
<div class="price">₹ 56,999
<span class="strike" >₹65,999</span>
<span class="discount-txt">Save ₹8,901 (14%)</span>
</div>
<p>10% Off on Indusind bank ltd. Cards</p>
</div>
<div class="card-footer">
<div class="footer-1">
<img src="https://rb.gy/orixca" alt="prime-logo">
<p>Get it by <span>Tomorrow 3PM</span></p>
</div>
<p>FREE Delivery by Amazon</p>
<button class="btn btn-sm">Add to cart</button>
</div>
</div>
</div>
Dismiss Card
Welcome to Dribble
Find design Inspiration. Share your work. Join the #1 creative community online.
<div class="relative card-container dismiss-card">
<div class="card-header">
<div class="title">Welcome to Dribble</div>
</div>
<div class="card-content">
<p class="card-description">..text..lt;/p>
</div>
<div class="card-footer">
<button class="btn btn-xs">Sign up with email</button>
<a href="#"><i class="icon avatar-circle fab fa-google"></i></a>
</div>
<button class="pointer absolute close-icon flex"><i class="icon fas fa-times"></i></button>
</div>
Overlay Card
<div class="p-0 overflow-hidden relative card-overlay">
<div class="img-overlay">
<img src="/Assets/nature.jpg" alt="nature image">
</div>
<div class="p-1 card-overlay-content">
<h1 class="title" >Bologna</h1>
<span>Romagna,Italy</span>
<p class="card-description" >It is seventh most populous city in Italy, at the heart of a metroplitan area of about one million people.</p>
</div>
</div>
Text only card
AP Psychology - Course :
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias exercitationem, molestiae ad minima voluptatem vitae expedita ea eos aut dolorem illum architecto vel animi esse officia dignissimos molestias error odit rerum omnis unde reprehenderit. Incidunt dicta quisquam sint perspiciatis official.
<div class="relative card-container text-card">
<div class="card-content">
<h1 class="title" >AP Psychology - Course : </h1>
<p class="card-description" >..text..</p>
</div>
<div class="card-footer">
<span>Sept 23,2002</span>
</div>
</div>
Input
To see the 2nd form with animation, please click HERE.
To implement the same animation just remove replace the classname of "form-container" from "grid" to "flex" and add classname "none" to SignUp form(2nd Form).
<!-- SignIn Form -->
<div class="flex form-container">
<form action="login form register" id="login" class="login-form">
<h2 class="form-title txt-center h2">Sign in</h2>
<div class="input-with-icon">
<i class="icon size-xs far fa-user "></i>
<input type="text"
id = "check-email-inp" placeholder="Email" class="input email-input" required>
</div>
<!-- INPUT-VALIDATION -->
<div class="flex validation-style">
<img class="icon size-xs" src="/assets/warning.png" alt="">
<span class="msg-txt error-txt lt-bold">
Please enter correct email
</span>
</div>
<div class="input-with-icon">
<i class="icon fas fa-key"></i>
<input type="password" placeholder="Password"
id = "check-password-inp"
class="input password-input">
</div>
<div class="flex validation-style">
<img class="icon size-xs" src="/assets/warning.png" alt="">
<span class="error-txt lt-bold">
Please enter correct Password
</span>
</div>
<div class="flex remember-forgot-grp">
<div class="flex remember-box">
<input type="checkbox" id="yes" name="bydefault" value="yes" class="form-checkbox pointer">
<label for="yes" class="lt-bold txt-xs">Remember me</label>
</div>
<a href="#" class="login-forgot txt-sm txt-grey">Forgot password?</a>
</div>
<button href="#" type="submit" class="btn btn-md link login-btn">Sign in</button>
<div class="signup-way">
<span class="account-no">Don't have an Account?</span>
<a id="try-signup" href="#">Create one</a>
</div>
</form>
<form action="sign-up form register" id="sign-up" class="signup-form none">
<h2 class="form-title txt-center h2 ">Create Account</h2>
<div class="flex-container social-login">
<a href="#"><img class="icon size-xs" src="https://img.icons8.com/color/48/000000/google-logo.png"/></a>
<a href="#"><img class="icon size-xs" src="https://img.icons8.com/ios-glyphs/30/000000/github.png"/></a>
<a href="#"><img class="icon size-xs" src="https://img.icons8.com/color/48/000000/twitter--v1.png"/></a>
</div>
<p class="or"><span>or</span></p>
<div class="name-input-box">
<div class="input-with-icon ">
<i class="icon user-icon size-xs far fa-user"></i>
<input type="text" placeholder="First Name" class="input firstname-input" required>
</div>
<div class="input-with-icon">
<i class="icon user-icon size-xs far fa-user"></i>
<input type="text" placeholder="Last Name" class="input lastname-input" required>
</div>
</div>
<div class="input-with-icon">
<i class="icon email-icon size-xs far fa-envelope"></i>
<input type="email" placeholder="Email" class="input email-input" required >
</div>
<div class="input-with-icon password-box">
<i class="icon fas fa-key"></i>
<input type="password" placeholder=" Password" class="input see-password-input">
<a href="#" class="password-control "></a>
</div>
<div class="input-with-icon active-inp">
<i class="icon fas fa-key"></i>
<input type="password" placeholder="Confirm Password" class="input password-input">
</div>
<a href="#" class="signup-btn btn btn-md link">Sign Up</a>
<div class="login-way">
<span class="account-yes" >Already have an Account?</span>
<a href="#" id="try-login">Sign In</a>
</div>
</form>
</div>
Responsive Image
<img src="https://rb.gy/1w9cjm" alt="Responsive Image" class="res">
Circle Image
<img src="https://rb.gy/fjwtsq" alt="avatar of wesbos" class="size-3xl avatar-circle">
TEXT
Headings
This is a Heading H1
This is a Heading h2
This is a Heading h3
This is a Heading H4
This is a Heading H5
This is a Heading H6
<h1 class="h1">This is a Heading H1</h1>
<h2 class="h2">This is a Heading h2</h2>
<h3 class="h3">This is a Heading h3</h3>
<h4 class="h4">This is a Heading H4</h4>
<h5 class="h5">This is a Heading H5</h5>
<h6 class="h6">This is a Heading H6</h6>
Text Variation
This is a extra small text
This is a small text
This is a medium text
This is a large text
This is a extra large text
<div class="txt-xs">
This is a extra small text
</div>
<div class="txt-sm">
This is a small text
</div>
<div class="txt-md">
This is a medium text
</div>
<div class="txt-lg">
This is a large text
</div>
<div class="txt-xl">
This is a extra large text
</div>
Text Variation-II
This is a grey text
This is a center text
This is italic text
<!-- This is Grey Text -->
<div class="txt-grey txt-md">
This is a grey text
</div>
<div class="txt-center txt-md">
This is a center text
</div>
<div class="txt-italic txt-md">
This is italic text
</div>
Text Variation-III
This is a strike through text
Underline text
This is a bold text
This is a light font text
Title
COMPONENT LIBRARY
<p class="strike-txt txt-md">
This is a strike through text
</p>
<p class="txt-underline txt-md">Underline text</p>
<p class="bold txt-md">
This is a bold text
</p>
<p class="light-font txt-md">
This is a light font text
</p>
<div class="title bold ">Title</div>
<div class="title light-font ">COMPONENT LIBRARY</div>
List
List Variation-I
- list 1
- list 2
- list 1
- list 2
- list 1
- list 2
<ul class=" style-sq txt-md" >
<li>list 1</li>
<li>list 2</li>
</ul>
<ul class=" style-circle txt-md" >
<li>list 1</li>
<li>list 2</li>
</ul>
<ul class="list-none txt-md">
<li>list 1</li>
<li>list 2</li>
</ul>
List Variation-II
- List with Numbering
- List with Numbering
- List with Lower-Alphabets
- List with Lower-Alphabets
- List with Upper-Alphabets
- List with Upper-Alphabets
- List with Lower Roman Number
- List with Lower Roman Number
- List with Upper Roman Number
- List with Upper Roman Number
- List with (Reversed) Alphabets
- List with (Reversed) Alphabets
<ol class="style-numbering txt-md" >
<li>List with Numbering</li>
<li>List with Numbering</li>
</ol>
<ol class="style-alpha-lower txt-md">
<li>List with Lower-Alphabets</li>
<li>List with Lower-Alphabets</li>
</ol>
<ol class="style-alpha-upper txt-md">
<li>List with Upper-Alphabets</li>
<li>List with Upper-Alphabets</li>
</ol>
<ol class="style-lower-roman txt-md">
<li>List with Lower Roman Number</li>
<li>List with Lower Roman Number</li>
</ol>
<ol class="style-upper-roman txt-md">
<li>List with Upper Roman Number</li>
<li>List with Upper Roman Number</li>
</ol>
<ol class=" txt-md" reversed >
<li>List with (Reversed) Alphabets</li>
<li>List with (Reversed) Alphabets</li>
</ol>
List Variation-III - Stacked Notification
- This is a stacked notification
- This is a stacked notification
- This is a stacked notification
<ul class="txt-md stacked-list list-none" >
<li>
<i class="far fa-bell"></i>
This is a stacked notification
</li>
<li>
<i class="far fa-bell"></i>
This is a stacked notification
</li> <li>
<i class="far fa-bell"></i>
This is a stacked notification
</li>
</ul>
Navigation
Hamburger-SideBar
Please click HERE and decrease view-port/screen-size(if on desktop/laptop) for Hamburger Sidebar Experience.
Please note: The code for Hamburger Menu is also present in above Navigation Component. For your reference, I have added the same code below.
<!-- Hamburger Code -->
<a id="btnHamburger" href="#" class="header-toggle menu-btn icon">
<span></span>
<span></span>
<span></span>
</a>
<!-- SideBar code -->
<aside class="side-overlay" >
<section class="sidebar">
<div class="sidebar-header">
<div class="close-sidebar flex">
<i class="icon fas fa-times"></i>
</div>
<div class="welcome-header bold">
<span>Welcome</span>
</div>
<div class="txt-grey register ><a href="#">Login/Sign Up</a></div>
</div>
<div class="divider">"</div>
<div class="menu-content">
<div class="menu-list-wrap">
<ul class="menu-list list-none ">
<div class="menu-head"><span class="txt-grey ">SHOP IN</span></div>
<li><a href="#" class="link-name">Men</a></li>
</ul>
</div>
<div class="menu-list-wrap bg-grey">
<ul class="menu-list list-none ">
<div class="menu-head"><span class="txt-grey ">CONTACT US</span></div>
<li><a href="#" class="link-name">Help & Support</a></li>
</ul>
</div>
<div class="menu-list-wrap bg-grey">
<ul class="menu-list list-none ">
<div class="menu-head"><span class="txt-grey ">ABOUT US</span></div>
<li><a href="#" class="link-name">Our Story</a></li>
</ul>
</div>
</div>
</section>
</aside>
Grid
Grid-2 items
1
2
3
4
<div class="grid-container w-100 box-1">
<div class="grid-item item-1">1</div>
<div class="grid-item item-2">2</div>
<div class="grid-item item-3">3</div>
<div class="grid-item item-4">4</div>
</div>
Grid
Grid-3 items
Content-1
Content-2
Content-3
<div class="grid-container w-100 box-2">
<div class="item content-1">Content-1</div>
<div class="item content-2">Content-2</div>
<div class="item content-3">Content-3</div>
</div>
Modal
Note: I have used form in Modal div, you can use anything like a card or just text inside modal. The functionality still remains same.
<div id="modal-box" class="flex modal absolute inset">
<div class="relative forgot-password-card">
<form action="" class="forgot-password-form">
<span class="flex heading txt-md lt-bold">Reset password</span>
<p class="card-description txt-sm">Enter your email address and we will send you a link to reset your password.</p>
<div class="w-100 input-with-icon">
<i class="icon email-icon size-xs far fa-envelope"></i>
<input type="email" placeholder="Email" class="input email-input" required >
</div>
<button href="#" type="submit" class="btn btn-sm link reset-password-btn">Send reset link</button>
<a href="#" class="modal-close">×</a>
</form>
</div>
Slider
<div class="flex slider-container">
<input
type="range"
min="0"
max="5"
value="3"
class="slider-inp"
/>
<span class="slider-value lt-bold txt-sm">3</span>
</div>
Snackbar
The Snackbar has 4 variants: Simple Snackbar, Success Snackbar, Danger Snackbar and Info Snackbar
<button class="btn show-snackbar btn-sm">SHOW SNACKBAR</button>
<!-- The below code is for simple snackbar without any icon -->
<div class=" flex snackbar"><span>snackbar msg</span></div>
<!-- Success snackbar with icon -->
<div class="snackbar flex
success-snackbar"><i class="fa-solid fa-circle-check"></i><span>Signed in succesfully</span></div>
<!-- Danger Snackbar with icon -->
<div class="snackbar flex
danger-snackbar"><i class="fas fa-exclamation-circle"></i></i><span>Looks like something is wrong</span></div>
<!-- Info snackbar with icon -->
<div class="snackbar flex
info-snackbar"><i class="fas fa-info-circle"></i></i><span>The product is added</span></div>
Loader/Pre-loader Spinner
<div class="flex spinner-box">
<div class="flex circle-border">
<div class="w-100 h-100 circle-inner"></div>
</div>
</div>