Installation

Copy the following css link in the head tag of your HTML document and the JS link before the closing body tag and you are good to go.


<link rel="stylesheet" href="https://neural-ui.netlify.app/style.css" />

<script src="https://neural-ui.netlify.app/script.js"></script>

The icons used in this library are from Font Awesome. You can get your own CDN link here

Utilities

Here are some of the ultilities which can be used with other components to make your work easy 😄

(1) Spacing Utilities : Paddings & Margins

All the values will be using rem unit

- Single value classes

The value given in single value padding & margin classes will be applied to all four sides


<div class="p-1 m-2">
  <!-- Your content here  -->
</div>

Class syntax padding: p-value

Class syntax margin: m-value

Where value can be from (05, 1, 2, 3, 4)

- Double value classes

The first value given in double value padding classes will be applied to top and bottom and second value is for left and right sides


<div class="p-1-2 m-0-2">
  <!-- Your content here  -->
</div>

Class syntax padding: p-firstValue-secondValue

Class syntax margin: m-firstValue-secondValue

where firstValue and secondValue can be from (0, 05, 1, 2, 3, 4)

- Direction specific classes

The value given to direction specific classes of margin & padding will be applied accordingly in the direction specified with given value


<div class="pt-1 pb-1 pr-3 pl-0">
  <!-- Your content here  -->
</div>

<div class="mt-1 mb-1 mr-3 ml-0">
  <!-- Your content here  -->
</div>

Class syntax padding:

padding-top = pt-value, padding-bottom = pb-value, padding-left = pl-value, padding-right = pr-value

Class syntax margin:

margin-top = mt-value, margin-bottom = mb-value, margin-left = ml-value, margin-right = mr-value,

where value can be from (05, 1, 2, 3, 4)

(2) Colors

Utility classes for background color(bg) and foreground color(color)

bgWhite

colorWhite

bgGray

colorWhite

bgDarkGray

colorDarkGray

bgLightRed

colorLightRed

bgLightGreen

colorLightGreen

bgLightYellow

colorLightYellow

bgLightBlue

colorLightBlue

bgBlue

colorBlue

bgRed

colorRed

bgGreen

colorGreen

bgPurple

colorPurple

bgAlertRed

colorAlertRed

bgAlertGreen

colorAlertGreen

bgAlertYellow

colorAlertYellow

bgAlertBlue

colorAlertBlue

(3) Borders

Utility classes for borders

bd1

bdGray

bd2

bdBlack

bd3

bdBlue

bd4

bdGreen

bd4

bdPurple

bd4

bdYellow

bd2

border-round

(4) Flex

Property	Utility
display: flex;	flex
justify-content: space-between	justify-sb
align-items: center	align-center
flex-direction: column	flex-column
flex-wrap: wrap;	flex-wrap

Text Utilities

This is extra large text with extra bold weight

This is large text with bold weight.

This is medium text with medium weight.

This is small text with light weight.

This is extra small text with extra light weight.

This is gray text.

This is centered text.

this is uppercase text.

This is text with some letter spacing.


<h1 class="font-size-xl extra-bold">This is extra large text with extra bold weight</h1>
<h1 class="font-size-l bold">This is large text with bold weight.</h1>
<h1 class="font-size-m medium">This is medium text with medium weight.</h1>
<h1 class="font-size-sm light">This is small text with light weight.</h1>
<h1 class="font-size-xsm extra-light">This is extra small text with extra light weight.</h1>
<p class="font-size-m medium grayText">This is gray text.</p>
<p class="font-size-m medium center">This is centered text.</p>
<p class="font-size-m medium uppercase">this is uppercase text.</p>
<p class="font-size-m medium letter-spaced">This is text with some letter spacing.</p>

Alerts

There was an error processing your request

Data uploaded to the server. Fire on!

Seems your account is about to expire, upgrade now

Panda is going live on August 30th. Get ready!


<div class="alert p-1 bgLightRed flex align-center justify-sb">
  <div class="alert-content flex align-center">
    <i class="fas fa-exclamation-circle mr-1 icon-med alertred"></i>
    <p>There was an error processing your request</p>
  </div>
  <i class="fas fa-times-circle icon-med alertred alert-close"></i>
</div>

<div class="alert p-1 bgLightGreen flex align-center justify-sb">
  <div class="alert-content flex align-center">
  	<i class="fas fa-check-circle mr-1 icon-med alertgreen"></i>
  	<p>Data uploaded to the server. Fire on!</p>
  </div>
  <i class="fas fa-times-circle icon-med alertgreen alert-close"></i>
</div>

<div class="alert p-1 bgLightYellow flex align-center justify-sb">
   <div class="alert-content flex align-center">
     <i class="fas fa-exclamation-triangle mr-1 icon-med alertyellow"></i>
     <p>Seems your account is about to expire, upgrade now</p>
   </div>
   <i class="fas fa-times-circle icon-med alertyellow alert-close"></i>
</div>

<div class="alert p-1 bgLightBlue flex align-center justify-sb">
   <div class="alert-content flex align-center">
      <i class="fas fa-info-circle mr-1 icon-med alertblue"></i>
      <p>Panda is going live on August 30th. Get ready!</p>
   </div>
   <i class="fas fa-times-circle icon-med alertblue alert-close"></i>
</div>

Avatars


<div class="avatar-wrapper circle av-sm">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>


<div class="avatar-wrapper circle av-sm bd4 bdPurple">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-sm bd4 bdBlue">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-sm bd4 bdGreen">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-sm bd3 bdGray">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>


<div class="avatar-wrapper circle av-tiny">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-mini">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-sm">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-md">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

<div class="avatar-wrapper circle av-lg">
   <img class="avatar-img circle" src="your_img_url" alt="" />
</div>

Badge


<i class="fas fa-bell icon-lg icon-badge">
   <span class="badge circle bdg-tr bdg-num bdg-blue">4</span>
</i>

<i class="fas fa-bell icon-lg icon-badge">
   <span class="badge circle bdg-tr bdg-dot bdg-red bd4 bdWhite"></span>
</i>

<div class="avatar-wrapper circle av-sm">
   <img class="avatar-img circle" src="your_img_url" alt=""/>
   <span class="badge badge-avtr circle bdg-dot bdg-green bd4 bdWhite"></span>
</div>

<div class="avatar-wrapper circle av-sm">
   <img class="avatar-img circle" src="your_img_url" alt=""/>
   <span class="badge badge-avtr circle bdg-dot bdg-red bd4 bdWhite"></span>
</div>

<div class="avatar-wrapper circle av-sm">
   <img class="avatar-img circle" src="your_img_url" alt=""/>
   <span class="badge badge-avtr circle bdg-dot bdg-gray bd4 bdWhite"></span>
</div>

Buttons


<button class="btn btn-col btn-primary border-round">
   Primary Button
</button>

<button class="btn btn-col btn-primary border-round">
   <i class="fas fa-shopping-cart icon-sm"></i>
   Add to cart
</button>

<button class="btn btn-col btn-secondary border-round">
   Secondary Button
</button>

<button class="btn btn-col btn-danger border-round">
   Danger Button
</button>

<button class="btn btn-col btn-success border-round">
   Success Button
</button>

<button class="btn btn-col btn-warning border-round">
   Warning Button
</button>

<button class="btn btn-link">Link Button</button>

<button class="btn btn-icon">
   <i class="far fa-address-card icon-xlg"></i>
</button>

<button class="btn btn-icon icon-text-down">
   <i class="far fa-address-card icon-lg"></i>
   <p class="mt-05">Profile</p>
</button>

<button class="btn btn-icon icon-text-right">
   <i class="far fa-address-card icon-lg"></i>
    <p>Profile</p>
</button>

<button class="btn btn-col btn-lg btn-primary border-round">
    Primary Button
</button>

<button class="btn btn-col btn-block btn-primary border-round">
    Primary Button
</button>

<button class="btn btn-col btn-primary btn-float bottom-right5">
    <i class="fas fa-bars menu icon-lg"></i>
</button>

Cards

- Product Display Cards

Calvin Klein Original

Men Slim Fit Casual Shirt

Rs 999

Rs. 1999 (55% Off) 4.5

New

Levis

Men Slim Fit Casual Shirt

Rs 999

Rs. 1999 (55% Off) 3

Levis

Men Slim Fit Casual Shirt

Rs 999

Rs. 1999 (55% Off) 2

Levis

Men Slim Fit Casual Shirt

Rs 999

Rs. 1999 (55% Off)


<div class="card-product p-05 bd1 bdGray">
   <div class="product-img">
     <img src="" alt="" />
    </div>
  	<h1 class="product-heading mt-1">Calvin Klein Original</h1>
    <button class="btn btn-icon wishlist">
       <i class="fas fa-heart icon-sm wishlist-icon active"></i>
    </button>
    <p class="product-desc mt-05">Men Slim Fit Casual Shirt</p>
    <h2 class="price mt-05">Rs 999</h2>
    <div class="og-price">
       <span class="price-cut">Rs. 1999</span>
       <span class="discount">(55% Off)</span>
       <span class="review bgAlertGreen colorWhite m-0-05 border-round">
          <span class="review-text">4.5</span>
          <i class="fas fa-star"></i>
      </span>
    </div>
	<button class="btn btn-col btn-primary mt-1 border-round">
       Add to Cart
    </button>
</div>

<div class="card-product card-badge p-05 bd1 bdGray">
   <div class="product-badge">
      New
      <span class="top-triangle"></span>
      <span class="bottom-triangle"></span>
    </div>
	<div class="product-img">
       <img src="" alt="" />
    </div>
    <h1 class="product-heading mt-1">Levis</h1>
    <button class="btn btn-icon wishlist">
       <i class="fas fa-heart icon-sm wishlist-icon"></i>
     </button>
     <p class="product-desc mt-05">Men Slim Fit Casual Shirt</p>
     <h2 class="price mt-05">Rs 999</h2>
     <div class="og-price">
       <span class="price-cut">Rs. 1999</span>
       <span class="discount">(55% Off)</span>
     </div>
     <button class="btn btn-col btn-primary mt-1 border-round">
        Add to Cart
      </button>
</div>

<!-- For no border no shadow  -->

<div class="card-product p-05">
  <!-- Card content -->
</div>

<!-- For card with shadow  -->

<div class="card-product p-05 card-shadow">
  <!-- Card content -->
</div>

- Cart Card

Levis

Men Slim Fit Casual Shirt

1 Rs 999

Rs. 1999 (55% Off)


<div class="card-cart p-1 bd1 bdGray">
     <div class="cart-details">
        <div class="cart-product-img">
           <img src="" alt="" />
         </div>
         <div class="cart-product-desc">
            <h1 class="product-heading">Levis</h1>
            <p class="product-desc mt-05">Men Slim Fit Casual Shirt</p>
          	<div class="change-quantity mt-05">
            <button class="btn btn-icon btn-cart">
              <i class="fas fa-minus icon-xxsm"></i>
            </button>
            <h2 class="quantity bd1 bdGray m-0-05">1</h2>
            <button class="btn btn-icon btn-cart">
               <i class="fas fa-plus icon-xxsm"></i>
             </button>
          </div>
          <button class="btn btn-link colorRed mt-1">Remove</button>
          <button class="btn btn-link ml-05 mt-1">
             Move to Wishlist
          </button>
       	</div>
      </div>
      <div class="cart-product-price">
          <h2 class="price">Rs 999</h2>
          <span class="price-cut">Rs. 1999</span>
          <span class="discount">(55% Off)</span>
       </div>
</div>

- Social media post


<div class="card-social p-1 bd1 bdGray">
    <div class="profile-img">
       <div class="avatar-wrapper circle av-sm">
          <img class="avatar-img circle" src="" alt="" />
        </div>
     </div>
     <div class="social-post-text">
        <div class="profile-details">
          <h1 class="profile-user">Charles Johnson</h1>
          <p class="profile-username">@charliejohn</p>
          <p class="post-time">12h</p>
      	</div>
        <p class="post-text mt-05">
           Lorem ipsum dolor sit amet consectetur!
        </p>
        <button class="btn btn-icon mt-1">
            <i class="fas fa-heart like icon-med"></i>
         </button>
     </div>
</div>

- Image overlay card, Card with dismiss & Text only card

This is overlay heading

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab autem iste, quae magni quasi doloremque nemo deleniti sapiente est maiores!

This is overlay heading

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab autem iste, quae magni quasi doloremque nemo deleniti sapiente est maiores!

This is text heading

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab autem iste, quae magni quasi doloremque nemo deleniti sapiente est maiores!


<div class="card-text-overlay">
   <img src="" alt="" />
   <div class="overlay p-1">
      <h2 class="card-heading mt-1">This is overlay heading</h2>
      <p class="card-text mt-1">
         Lorem ipsum dolor, sit amet consectetur
      </p>
   </div>
</div>

<div class="card-text-overlay card-dismiss">
   <button class="btn btn-icon dismiss">
      <i class="far fa-times-circle icon-med"></i>
   </button>
   <img src="" alt="" />
   <div class="overlay p-1">
     <h2 class="card-heading mt-1">This is overlay heading</h2>
     <p class="card-text mt-1">
        Lorem ipsum dolor, sit amet consectetur 
     </p>
   </div>
</div>

<div class="card-textonly p-1 card-shadow border-round bgLightBlue">
   <h2 class="card-heading mt-1">This is text heading</h2>
   <p class="card-text mt-1">
      Lorem ipsum dolor, sit amet consectetur 
   </p>
</div>

Navigation

- Top fixed navbar (with only 3 options)


<nav class="nav top-fixed p-1 box-shadow-down">
  <h1 class="font-size-m">Brand Name</h1>
  <div class="menu">
    <button class="btn btn-icon icon-text-down">
      <i class="fas fa-store icon-med"></i>
      <p class="mt-05">Store</p>
    </button>
    <button class="btn btn-icon icon-text-down">
      <i class="fas fa-shopping-cart icon-med icon-badge">
        <span class="badge circle bdg-tr bdg-num bdg-blue">4</span>
      </i>
      <p class="mt-05">Cart</p>
    </button>
    <button class="btn btn-icon icon-text-down">
      <i class="fas fa-heart icon-med icon-badge colorRed">
        <span class="badge circle bdg-tr bdg-num bdg-blue">1</span>
      </i>
      <p class="mt-05">Wishlist</p>
    </button>
  </div>
</nav>

- Left fixed Navbar (floats from right on mobile, see the nav of this page for working eg.)

Code for nav (paste in body)


<nav class="leftfixed-nav p-1-0" id="menu">
  <div class="top-element">
    <a href="/" class="logo">
      <img src="/images/panda.png" alt="" />
      <h3>Brandname</h3>
    </a>
    <button class="m-0-05 btn btn-icon" id="menu-close">
      <i class="fas fa-times icon-med"></i>
    </button>
  </div>
  <a class="nav-element-link mt-05 active" href="#">Installation</a>
  <a class="nav-element-link mt-05" href="">Utilities</a>
  <a class="nav-element-link mt-05" href="">Text Utilities</a>
  <a class="nav-element-link mt-05" href="">Alerts</a>
  <a class="nav-element-link mt-05" href="">Avatars</a>
  <a class="nav-element-link mt-05" href="">Badges</a>
  <a class="nav-element-link mt-05" href="">Buttons</a>
  <a class="nav-element-link mt-05" href="">Cards</a>
  <a class="nav-element-link mt-05" href="">Navigation</a>
  <a class="nav-element-link mt-05" href="">Input</a>
  <a class="nav-element-link mt-05" href="">Images</a>
  <a class="nav-element-link mt-05" href="">Modal</a>
  <a class="nav-element-link mt-05" href="">Grids</a>
</nav>

Paste this for menu button somewhere in the body


<button class="btn btn-col btn-primary btn-float" id="menu-btn">
  <i class="fas fa-bars menu icon-med"></i>
</button>

IMP: Give padding-left to the display section to display content alongside the nav


.displaysection{
  padding-left: 25%;
}

Input

Name Name Error in your input


<label class="inputgroup">
  <input class="input-textbox focus-blue" placeholder=" " />
  <span class="input-label">Name</span>
</label>

<label class="inputgroup error">
  <input class="input-textbox" placeholder=" " />
  <span class="input-label">Name</span>
  <span class="error-text">Error in your input</span>
</label>

Images


<div>
  <img src="" alt="" class="responsive-image" />
</div>

<div class="center">
  <img src="" alt="" class="width-200px height-200px circle" />
</div>

Modal

Paste this code in your body


<div class="modal-overlay" id="modal">
  <div class="modal-container p-1 border-round">
    <h1 class="center font-size-l bold">Are you sure, you are a robot?</h1>
    <div class="modal-buttons">
      <button class="btn btn-col btn-danger border-round" id="modal-close">
        No !!
      </button>
      <button class="btn btn-col btn-success border-round" id="modal-success">
        Yes
      </button>
    </div>
  </div>
</div>

Rangle slider

Grids


<div class="grid-container web-two mob-one p-1 bgGray mt-2">
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
</div>
<div class="grid-container web-three mob-two p-1 bgGray mt-2">
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
</div>
<div class="grid-container web-four mob-two p-1 bgGray mt-2">
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
  <div class="content bgWhite"></div>
</div>