Zen-ui

Getting Started

Add this in <head/> of your HTML and you're ready to Go..🏹🚀

                  
        <link rel="stylesheet" href="https://zenui.netlify.app/Styles/components.css">

Alert

This is an .alert

This is an .alert-mycolor

This is an .alert-primary

This is an .alert-success

This is an .alert-secondary

This is an .alert-danger

This is an .alert-warning

      
        <div class="alert">

          This is an .alert <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-white">

          This is an .alert-white <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-primary">

          This is an .alert-primary <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-success">

          This is an .alert-success <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-secondary">

          This is an .alert-secondary <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-danger">

          This is an .alert-danger <button class="alert-btn">x</button>

        </div>

        <div class="alert alert-warning">

          This is an .alert-warning <button class="alert-btn">x</n>

        </div>

Avatar

.avatar

.avatar-circle

.avatar-small

        
      <img

        class="avatar"

        src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

        alt="Avatar"

      />
      <img

        class="avatar-circle"

        src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

        alt="Avatar"

      />
      <img

        class="avatar-small"

        src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

        alt="Avatar"

      />

Badge

.badge New

.badge-primary New

.badge-success New

.badge-warning New

.badge-danger New

        
    <h3>.badge <span class="badge">New</span></h3>

    <h3>

      .badge-primary <span class="badge badge-primary">New</span>

    </h3>

    <h3>

      .badge-success <span class="badge badge-success">New</span>

    </h3>

    <h3>

      .badge-warning <span class="badge badge-warning">New</span>

    </h3>

    <h3>

      .badge-danger <span class="badge badge-danger">New</span>

    </h3>

Badge on Icons

9 .badge badge-icon

9 .badge badge-icon badge-primary

9 .badge badge-icon badge-warning

9 .badge badge-icon badge-danger

      
      <i class="fa fa-shopping-cart" aria-hidden="true"></i>

      <span class="badge badge-icon">9</span>

      .badge badge-icon

      <i class="fa fa-shopping-cart" aria-hidden="true"></i>

      <span class="badge badge-icon badge-primary">9</span>

      .badge badge-icon badge-primary

      <i class="fa fa-shopping-cart" aria-hidden="true"></i>

      <span class="badge badge-icon badge-warning">9</span>

      .badge badge-icon badge-warning

      <i class="fa fa-shopping-cart" aria-hidden="true"></i>

      <span class="badge badge-icon badge-danger">9</span>

      .badge badge-icon badge-danger

Button

      
        <button class="btn">.btn</button>

        <button class="btn btn-primary">.btn-primary</button>

        <button class="btn btn-secondary">.btn-secondary</button>

        <button class="btn btn-success">.btn-success</button>

        <button class="btn btn-warning">.btn-warning</button>

        <button class="btn btn-danger">.btn-danger</button>

Icon Button and floating Action Button

      
    <button class="btn btn-icon">

        <i class="fa fa-cloud-download" aria-hidden="true"></i>

    </button>

    <button class="btn btn-icon">

        <i class="fa fa-cloud-upload" aria-hidden="true"></i>

    </button>

Link

.link .link-primary .link-warning

      
    <a class="link">.link</a>

    <a class="link link-primary">.link-primary</a>

    <a class="link link-warning">.link-warning</a>

Card

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

      
      <div class="card">

        <div class="card-img">

          <img

            class="avatar"

            src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

            alt="Avatar"

          />

        </div>

        <div class="card-text">

            <h3>kunal tijare</h3>

            <p>

              Lorem ipsum dolor, sit amet consectetur adipisicing elit.

              Natus consequuntur placeat quibusdam reiciendis dolorem

              eaque ipsum ducimus.

            </p>

        </div>

      </div>

Card With Badge

.card-badge

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

New

          
      <div class="card card-with-badge">

          <div class="card-img">

            <img

              class="avatar"

              src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

              alt="Avatar"

            />

          </div>

          <div class="card-text">

            <h3>kunal tijare</h3>

            <p>

              Lorem ipsum dolor, sit amet consectetur adipisicing elit.

              Natus consequuntur placeat quibusdam reiciendis dolorem

              eaque ipsum ducimus.

            </p>

          </div>

          <span class="badge card-badge">New</span>

      </div>

Card With Dismiss Badge

.dismiss-badge

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

        
      <div class="card card-dismiss">

        <div class="card-img">

          <img

            class="avatar"

            src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

            alt="Avatar"

          />

        </div>

        <div class="card-text">

          <h3>kunal tijare</h3>

          <p>

            Lorem ipsum dolor, sit amet consectetur adipisicing elit.

            Natus consequuntur placeat quibusdam reiciendis dolorem

            eaque ipsum ducimus.

          </p>

        </div>

        <button class="dismiss-badge dismiss-btn">x</button>

      </div>

Product Card

.wishlist-btn

Apple i-phone 114.8
₹44,999

        
        <div class="card product-card">

        <button class="wishlist-badge wishlist-btn">

          <i class="fa fa-heart-o"></i>

        </button>

        <div class="card-img">

          <img

            src="https://images-na.ssl-images-amazon.com/images/I/71QE00iB9IL._SL1500_.jpg"

            width="100%"

            height="auto"

            alt="img-logo"

          />

        </div>

        <div class="card-text">

          <p>

            <strong>Apple i-phone 11</strong

            ><span class="rating"

              >4.8<i class="fa fa-star" aria-hidden="true"></i

            ></span>

            <br />

            <strong>₹44,999</strong>

          </p>

        </div>

        <button class="btn ">add to Cart</button>

      </div>

Card with Overlay

.card-with-overlay

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

this is overlay

this is overlay para Lorem ipsum dolor sit amet consectetur adipisicing elit. Id enim accusantium exercitationem earum omnis quas ducimus natus ipsum illo? Deserunt optio veritatis magni iusto nobis? Debitis officia sint nesciunt et.

        
      <div class="card card-with-overlay">

        <div class="card-img">

          <img

            class="avatar"

            src="https://cdn2.iconfinder.com/data/icons/flatfaces-everyday-people-square/128/beard_male_man_face_avatar-512.png"

            alt="Avatar"

          />

        </div>

        <div class="card-text">

          <h3>kunal tijare</h3>

          <p>

            Lorem ipsum dolor, sit amet consectetur adipisicing elit.

            Natus consequuntur placeat quibusdam reiciendis dolorem

            eaque ipsum ducimus.

          </p>

        </div>

        <div class="card-overlay">

          <div class="overlay-text">

            <h4>this is overlay</h4>

            <p>

              this is overlay para Lorem ipsum dolor sit amet

              consectetur adipisicing elit. Id enim accusantium

              exercitationem earum omnis quas ducimus natus ipsum

              illo? Deserunt optio veritatis magni iusto nobis?

              Debitis officia sint nesciunt et.

            </p>

          </div>

        </div>

      </div>

Text Card

.card

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

        
      <div class="card">

        <div class="card-text">

          <h3>kunal tijare</h3>

          <p>

            Lorem ipsum dolor, sit amet consectetur adipisicing elit.

            Natus consequuntur placeat quibusdam reiciendis dolorem

            eaque ipsum ducimus.

          </p>

        </div>

      </div>

Card with Shadow

.card-with-shadow

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

          
        <div class="card card-with-shadow">

          <div class="card-text">

            <h3>kunal tijare</h3>

            <p>

              Lorem ipsum dolor, sit amet consectetur adipisicing elit.

              Natus consequuntur placeat quibusdam reiciendis dolorem

              eaque ipsum ducimus.

            </p>

          </div>

        </div>

Horizontal Card

.horizontal-card

kunal tijare

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus consequuntur placeat quibusdam reiciendis dolorem eaque ipsum ducimus.

        
      <div class="card horizontal-card">

        <div class="card-text">

          <h3>kunal tijare</h3>

          <p>

            Lorem ipsum dolor, sit amet consectetur adipisicing elit.

            Natus consequuntur placeat quibusdam reiciendis dolorem

            eaque ipsum ducimus.

          </p>

        </div>

      </div>

Image

.image-responsive

        
      <img

        class="image-responsive"

        class="avatar"

        src="https://images.unsplash.com/photo-1495001258031-d1b407bc1776?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzN8fGJsYWNrJTIwYW5kJTIwd2hpdGUlMjBxdW90ZXN8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"

        alt="Avatar"

      />

Image

.round-image

        
      <img

        class="round-image"

        class="avatar"

        src="https://images.unsplash.com/photo-1495001258031-d1b407bc1776?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzN8fGJsYWNrJTIwYW5kJTIwd2hpdGUlMjBxdW90ZXN8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60"

        alt="Avatar"

      />

Input

.input

.input-md

Name

.input-lg

Username

        
      <div class="input-group">

        <label class="input-label" for="input-sm">Email</label>

        <input

          class="input input-sm"

          type="email"

          id="input-sm"

          placeholder="Email"

          required

        />

      </div>

      <div class="input-group">

        <label class="input-label" for="input-md">Email</label>

        <input

          class="input input-md"

          type="email"

          id="input-md"

          placeholder="Email"

          required

        />

      </div>

      <div class="input-group">

        <label class="input-label" for="input-lg">Email</label>

        <input

          class="input input-lg"

          type="email"

          id="input-lg"

          placeholder="Email"

          required

        />

      </div>

.line-input

.line-input input-md

        
        <div class="input-group">

        <input

          class="input line-input input-sm"

          type="text"

          id="line-input-sm"

          placeholder="Name"

          required

        />

        </div>

        <h3>.line-input input-md</h3>

        <div class="input-group">

        <input

          class="input line-input input-md"

          type="text"

          id="line-input-md"

          placeholder="Name"

          required

        />

      </div>

Input With Validation

.input

Username

Required

.input-md

Password

Acccepted

.input-lg

Username

Verified

        
      <div class="input-group">

      <label class="input-label" for="input-valid">Username</label>

        <input

          class="input input-sm"

          type="text"

          id="input-valid"

          placeholder="Username"

          required

        />

      </div>

      <span class="validation-msg-required">Required</span>

      <h3>.input-md</h3>

      <div class="input-group">

        <label class="input-label" for="input-valid">Password</label>

        <input

          class="input input-md"

          type="password"

          id="input-valid"

          placeholder="Username"

          required

        />

      </div>

      <span class="validation-msg-ok">Acccepted</span>

      <h3>.input-lg</h3>

      <div class="input-group">

        <label class="input-label" for="input-lg">Username</label>

        <input

          class="input input-lg"

          type="text"

          id="input-lg"

          placeholder="Username"

          required

        />

      </div>

      <span class="validation-msg-good">Verified</span>

.line-input

Required

.line-input input-md

Required

        
      <input

        class="input line-input"

        type="password"

        name="username"

        placeholder="input line-input"

      />

      <br />

      <span class="validation-msg-required">Required</span>

      <h3>.line-input input-md</h3>

      <input

        class="input line-input input-md"

        type="text"

        name="username"

        placeholder="input line-input input-md"

      />

      <br />

      <span class="validation-msg-required">Required</span>

Lists

.inline-list-item

List Item
List Item
List Item

        
        <ul class="inline-list">

          <li class="inline-list-item">List Item</li>

          <li class="inline-list-item">List Item</li>

          <li class="inline-list-item">List Item</li>

        </ul>

.list

List Item
List Item
List Item
List Item

        
      <ul class="list">

        <li class="list-item">List Item</li>

        <li class="list-item">List Item</li>

        <li class="list-item">List Item</li>

        <li class="list-item">List Item</li>

      </ul>

Stacked List

.stacked-list

Youve Got a New Mail
Youve Got a New Mail
Youve Got a New Mail
Youve Got a New Mail

        
      <ul class="stacked-list">

        <li class="stacked-list-item">Youve Got a New Mail</li>

        <li class="stacked-list-item">Youve Got a New Mail</li>

        <li class="stacked-list-item">Youve Got a New Mail</li>

        <li class="stacked-list-item">Youve Got a New Mail</li>

      </ul>

Navigation

.navbar-right

        
      <div class="navbar navbar-right">

        <div class="nav-brand">

          <img src="/Images/steering.svg" class="brand-img" />

          <span class="nav-brand-heading">Brand-Heading</span>

        </div>

        <div class="nav-group">

          <div class="nav-item">Home</div>

          <div class="nav-item">About</div>

          <div class="nav-item">Contact</div>

          <div class="nav-item">Login</div>

      </div>

.navbar-center

        
      <div class="navbar navbar-center">

        <div class="nav-brand">

          <img src="/Images/steering.svg" class="brand-img" />

          <span class="nav-brand-heading">Brand-Heading</span>

        </div>

        <div class="nav-group">

          <div class="nav-item">Home</div>

          <div class="nav-item">About</div>

          <div class="nav-item">Contact</div>

          <div class="nav-item">Login</div>

      </div>

.navbar-left

        
      <div class="navbar navbar-left">

        <div class="nav-brand">

          <img src="/Images/steering.svg" class="brand-img" />

          <span class="nav-brand-heading">Brand-Heading</span>

        </div>

        <div class="nav-group">

          <div class="nav-item">Home</div>

          <div class="nav-item">About</div>

          <div class="nav-item">Contact</div>

          <div class="nav-item">Login</div>

      </div>

Modal

.modal

        
      <div class="modal">

        <p>

          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam

          esse id ab, soluta provident tempore. Perspiciatis

          voluptatum tenetur reiciendis, voluptatibus aliquid eum

          adipisci nostrum aut enim temporibus modi non suscipit?

        </p>

        <p>

          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam

          esse id ab, soluta provident tempore. Perspiciatis

          voluptatum tenetur reiciendis, voluptatibus aliquid eum

          adipisci nostrum aut enim temporibus modi non suscipit?

        </p>

        <button class="btn modal-btn">X</button>

      </div>

Toast

.toast

You've Got an Email...!

        
      <div class="toast toast-n">

        <p>You've Got an Email...!</p>

        <button class="btn toast-btn">X</button>

      </div>

Rating

.rating

4.8

        
      <span class="rating">

        4.8<i class="fa fa-star" aria-hidden="true"></i>

      </span>