Quick start

To add Max UI in your project, Copy the Link given below and paste it in the head tag of your html, above all other style sheets.

              
<link rel="stylesheet" href="https://github.com/jalajcodes/max-ui/blob/dev/components/max.css">

Fonts and Icons

To use the fonts and icons used in the component library add these tag inside your head tag.

              
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=Poppins:wght@400;500;600&amp;display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">

Alerts

Alerts are used to notify the user of an important event.

There are 4 types of Alerts in Max UI : alert-primary alert-secondary alert-success alert-warning

Demo

Primary! This is a primary alert—check it out!

Secondary! This is a secondary alert—check it out!

Success! This is a success alert—check it out!

Warning! This is a warning alert—check it out!

    
  <div class="alert alert-primary">
    <strong>Primary!</strong> This is a primary alert—check it out!
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> This is a secondary alert—check it out!
  </div>
  <div class="alert alert-success">
    <strong>Success!</strong> This is a success alert—check it out!
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This is a warning alert—check it out!
  </div>

Avatar

Avatars are used to represent people, companies, products, etc.

Demo

    
<div class="avatar avatar-xs">
  <img src="https://picsum.photos/200/200?random=4" alt="picsum">
</div>
<div class="avatar avatar-sm">
  <img src="https://picsum.photos/200/200?random=3" alt="picsum">
</div>
<div class="avatar avatar-md">
  <img src="https://picsum.photos/200/200?random=2" alt="picsum">
</div>
<div class="avatar avatar-lg">
  <img src="https://picsum.photos/200/200?random=1" alt="picsum">
</div>

Badge

Badges are used to display text or status.

Pill Badges

Primary Secondary Success Warning

              
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>

Example of Text with Badge new

    
<p class="badge-container">
  Example of Text with Badge
  <span class="badge badge-success">new</span>
</p>

Avatar Badges

    
<div class="avatar-badge">
  <div class="avatar avatar-sm">
    <img src="https://picsum.photos/200/200?random=4" alt="picsum">
  </div>
  <span class="badge badge-success"></span>
</div>
<div class="avatar-badge">
  <div class="avatar avatar-sm">
    <img src="https://picsum.photos/200/200?random=4" alt="picsum">
  </div>
  <span class="badge badge-warning"></span>
</div>
<div class="avatar-badge">
  <div class="avatar avatar-sm">
    <img src="https://picsum.photos/200/200?random=4" alt="picsum">
  </div>
  <span class="badge badge-primary"></span>
</div>
<div class="avatar-badge">
  <div class="avatar avatar-sm">
    <img src="https://picsum.photos/200/200?random=4" alt="picsum">
  </div>
  <span class="badge badge-secondary"></span>
</div>

Icon Badge

    
<div class="icon-badge">
  <i class="fa fa-bell" aria-hidden="true"></i>
  <span class="badge badge-success"></span>
</div>
<div class="icon-badge">
  <i class="fa fa-bell" aria-hidden="true"></i>
  <span class="badge badge-warning"></span>
</div>
<div class="icon-badge">
  <i class="fa fa-bell" aria-hidden="true"></i>
  <span class="badge badge-primary"></span>
</div>
<div class="icon-badge">
  <i class="fa fa-bell" aria-hidden="true"></i>
  <span class="badge badge-secondary"></span>
</div>

Button

Buttons are used to trigger an action.

Demo

              
<button class="btn btn--primary">Primary</button>
<button class="btn btn--info">Info</button>
<button class="btn btn--success">Success</button>
<button class="btn btn--warning">Warning</button>

              
<button class="btn btn--primary btn--round">Click Me</button>
<button class="btn btn--primary btn--outline">Click Me</button>
<button class="btn btn--primary btn--round btn--outline">Click Me</button>
<button class="btn btn--primary btn--link">Click Me</button>

Card

Cards are used to display content in a way that is visually distinct and attached to the main content.

Vertical Card

Sale

Men's Cotton Sweatshirt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt. Facere laboriosam accusantium corrupti, repellendus ratione inventore architecto expedita aliquam!

Rs. 1000

Sale

Men's Cotton Sweatshirt

Rs. 1000

Sale

Men's Cotton Sweatshirt

Rs. 1000

              
<div class="card vertical">
  <div class="card__image">
    <span class="badge badge-warning">Sale</span>
    <a href="#"><img class="img-responsive" src="https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg" alt=""></a>
  </div>
  <div class="card__content">
    <a class="card__name" href="#">Men's Cotton Sweatshirt</a>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia
      ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
      Facere laboriosam accusantium corrupti, repellendus ratione inventore architecto
      expedita aliquam!
    </p>
    <div class="card__bottom">
      <div class="card__price">
        <span>Rs. 1000</span>
      </div>
      <div class="card__buttons">
        <button class="btn btn--sm btn--primary">
          <i class="fas fa-shopping-cart" aria-hidden="true"></i> Add to Cart to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Horizontal Card

To use the horizontal card just add the .horizontal class to the parent.

Sale

Men's Cotton Sweatshirt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

Rs. 1000

Sale

Men's Cotton Sweatshirt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.

Rs. 1000

              
<div class="card horizontal">
  <span class="card__close"><i class="fas fa-times" aria-hidden="true"></i></span>
  <div class="card__image">
    <span class="badge badge-warning">Sale</span>
    <a href="#"><img class="img-responsive" src="https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg" alt=""></a>
  </div>
  <div class="card__content">
    <a class="card__name" href="#">Men's Cotton Sweatshirt</a>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia
      ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
    </p>
    <div class="card__bottom">
      <div class="card__price">
        <span>Rs. 1000</span>
      </div>
      <div class="card__buttons">
        <button class="btn btn--sm btn--primary">
          <i class="fas fa-shopping-cart" aria-hidden="true"></i>Add
        </button>
      </div>
    </div>
  </div>
</div>

Text Only Card

To use the text only card just add the .text-only class to the parent.

Sale

Men's Cotton Sweatshirt

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos voluptates officia corrupti at expedita dolorum atque repellat nobis excepturi inventore veniam possimus reprehenderit tenetur, vel, voluptate quaerat nihil? Explicabo, quisquam.

Rs. 1000

Sale

Men's Cotton Sweatshirt

Rs. 1000

              
<div class="card horizontal text-only">
  <span class="badge badge-warning">Sale</span>
  <div class="card__image">
    <a href="#"><img class="img-responsive" src="https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg" alt=""></a>
  </div>
  <div class="card__content">
    <a class="card__name" href="#">Men's Cotton Sweatshirt</a>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos voluptates
      officia corrupti at expedita dolorum atque repellat nobis excepturi inventore
      veniam possimus reprehenderit tenetur, vel, voluptate quaerat nihil? Explicabo,
      quisquam.
    </p>
    <div class="card__bottom">
      <div class="card__price">
        <span>Rs. 1000</span>
      </div>
      <div class="card__buttons">
        <button class="btn btn--sm btn--primary">
          <i class="fas fa-shopping-cart" aria-hidden="true"></i>Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Card with Overlay

To use the card with overlay just add a div with class .card__overlay class to the parent and text content in it.

Out of Stock

Sale

Men's Cotton Sweatshirt

Rs. 1000

Out of Stock

Sale

Men's Cotton Sweatshirt

Rs. 1000

              
<div class="card vertical">
  <div class="card__overlay">
    <i class="fa-regular fa-face-frown" aria-hidden="true"></i> Out of Stock
  </div>
  <div class="card__image">
    <span class="badge badge-red">Sale</span>
    <a href="#"><img class="img-responsive" src="https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg" alt=""></a>
  </div>
  <div class="card__content">
    <a class="card__name" href="#">Men's Cotton Sweatshirt</a>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto soluta, officia
      ipsum voluptatem laboriosam tenetur facilis illum assumenda dolorem deserunt.
      Facere laboriosam accusantium corrupti, repellendus ratione inventore architecto
      expedita aliquam!
    </p>
    <div class="card__bottom">
      <div class="card__price">
        <span>Rs. 1000</span>
      </div>
      <div class="card__buttons">
        <button class="btn btn--sm btn--primary">
          <i class="fas fa-shopping-cart" aria-hidden="true"></i>Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

Toast

Toasts are used to display messages to the user. They are used to notify the user of important events.

Toast with Icon

Toasts can be used with icons.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

              
<div class="toast toast--primary">
  <i class="toast__icon fa-solid fa-circle-info" aria-hidden="true"></i>
  <p class="toast__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="toast toast--success">
  <i class="toast__icon fa-solid fa-circle-info" aria-hidden="true"></i>
  <p class="toast__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="toast toast--error">
  <i class="toast__icon fa-solid fa-circle-info" aria-hidden="true"></i>
  <p class="toast__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="toast toast--info">
  <i class="toast__icon fa-solid fa-circle-info" aria-hidden="true"></i>
  <p class="toast__text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>

Rating

Ratings are used to display the user's rating of a product or service.

To change rating use the --rating css variable like shown below.

              
<div class="rating" style="--rating: 2.4"></div>

List

Lists are used to display a list of items.

Unordered List

Item 1
Item 2
Item 3
Item 4

              
<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

List Style Circle

Item 1
Item 2
Item 3
Item 4

              
<ul class="list list--circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

List Style Square

Item 1
Item 2
Item 3
Item 4

              
<ul class="list list--square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

List Style Roman

Item 1
Item 2
Item 3
Item 4

              
<ol class="list list--roman">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Notification Stacked List

This is stacked list without bullets. You can add any component inside li element. Check below code for cards in stacked list.

Sale

Men's Cotton Sweatshirt
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos voluptates officia corrupti at expedita dolorum atque repellat nobis excepturi inventore veniam possimus reprehenderit tenetur, vel, voluptate quaerat nihil? Explicabo, quisquam.

Rs. 1000
Sale

Men's Cotton Sweatshirt
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos voluptates officia corrupti at expedita dolorum atque repellat nobis excepturi inventore veniam possimus reprehenderit tenetur, vel, voluptate quaerat nihil? Explicabo, quisquam.

Rs. 1000
Sale

Men's Cotton Sweatshirt
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos voluptates officia corrupti at expedita dolorum atque repellat nobis excepturi inventore veniam possimus reprehenderit tenetur, vel, voluptate quaerat nihil? Explicabo, quisquam.

Rs. 1000

              
<ul class="stacked-list">
  <li>
    <!-- any component here -->
  </li>
</ul>

Grid

The grid is a responsive layout system that allows you to create a flexible grid system that will automatically resize to fit the screen.

Two Columns Grid

To create a two column grid, add the class .grid and .col-2 to the parent element.

COLUMN 1

COLUMN 2

COLUMN 1

COLUMN 2

              
<div class="grid col-2">
  <div class="well drop-shadow-lg">COLUMN 1</div>
  <div class="well drop-shadow-lg">COLUMN 2</div>
  <div class="well drop-shadow-lg">COLUMN 1</div>
  <div class="well drop-shadow-lg">COLUMN 2</div>
</div>

Three Columns Grid

To create a three column grid, add the class .grid and .col-3 to the parent element.

COLUMN 1

COLUMN 2

COLUMN 3

COLUMN 1

COLUMN 2

COLUMN 3

              
<div class="grid col-3">
  <div class="well drop-shadow-lg">COLUMN 1</div>
  <div class="well drop-shadow-lg">COLUMN 2</div>
  <div class="well drop-shadow-lg">COLUMN 3</div>
  <div class="well drop-shadow-lg">COLUMN 1</div>
  <div class="well drop-shadow-lg">COLUMN 2</div>
  <div class="well drop-shadow-lg">COLUMN 3</div>
</div>

Image

Our utility classes can be used to make an image responsive or rounded.

Responsive Image

To make an image responsive, just add the .img-responsive class to the image.

              
<img class="img-responsive" src="https://picsum.photos/1000" alt="">

Rounded Image

To make an image rounded, just add the .img-rounded class to the image.

              
<img class="img-rounded" src="https://picsum.photos/200" alt="">

Modal

The modal is a component that allows you to create a modal window that can be displayed on the screen.

Modal

              
<div class="modal__container" id="modal-container">
  <section class="modal" id="modal-el">
    <header class="modal__title">
      <h1>Modal Title</h1>
    </header>
    <main class="modal__body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis blanditiis,
        explicabo deleniti rerum.
      </p>
    </main>
    <footer class="modal__footer" id="modal-footer">
      <button class="btn btn--primary modal__footer--btn">ACTION 1</button>
      <button class="btn btn--outline modal__footer--btn">ACTION 2</button>
    </footer>
  </section>
</div>

<!-- add this in a separate javascript file -->
<script>
  const modalBtn = document.getElementById("modal-btn");
  const modalContainer = document.getElementById("modal-container");
  const modalElem = document.getElementById("modal-el");
  const modalFooterButtons = document.querySelectorAll(".modal__footer--btn");

  modalBtn.addEventListener("click", () => {
    modalContainer.style.display = "flex";
    modalElem.style.display = "flex";
  });

  window.addEventListener("click", (e) => {
    if (
      e.target == modalContainer ||
      e.target === modalFooterButtons[0] ||
      e.target === modalFooterButtons[1]
    ) {
      modalContainer.style.display = "none";
      modalElem.style.display = "none";
    }
  });
</script>

Navigation (Responsive)

The navigation is a component that allows you to create a navigation bar that can be displayed on the screen.

Navigation

Resize your browser to see responsive version.

Home About Contact

              
<div class="nav">
  <div class="nav__logo">
    <img src="./images/logo.png" alt="logo" width="200">
  </div>
  <div class="nav__links">
    <a href="#" class="nav__link">
      <span class="nav__link--text">Home</span>
    </a>
    <a href="#" class="nav__link">
      <span class="nav__link--text">About</span>
    </a>
    <a href="#" class="nav__link">
      <span class="nav__link--text">Contact</span>
    </a>
  </div>
  <div class="nav__menu-icon">
    <i class="fa-solid fa-bars" aria-hidden="true"></i>
  </div>
</div>

<!-- add this in a separate javascript file -->
<script>
  const navMenuIcon = document.querySelector(".nav__menu-icon");
  const navLinks = document.querySelector(".nav__links");

  navMenuIcon.addEventListener("click", () => {
    navLinks.classList.toggle("active");
  });
</script>

Input

The Input field is used where a user can enter data. Like User's Name, Password, Email, etc.

Demo

              
<div class="input-container">
  <input type="text" placeholder="Placeholder Text">
  <span class="focus-border">
    <i></i>
  </span>
</div>

Input with Validation

Please enter a valid email.

              
<div class="input-container error">
  <input type="email" placeholder="Email Address">
  <span class="input-error"> Please enter a valid email. </span>
</div>

Text

There are various txt utilities available in Max UI

Headings

A quick brown fox jumps over the lazy dog

              
<h1>A quick brown fox jumps over the lazy dog</h1>
<h2>A quick brown fox jumps over the lazy dog</h2>
<h3>A quick brown fox jumps over the lazy dog</h3>
<h4>A quick brown fox jumps over the lazy dog</h4>
<h5>A quick brown fox jumps over the lazy dog</h5>
<h6>A quick brown fox jumps over the lazy dog</h6>

Gray Text

A quick brown fox jumps over the lazy dog

              
<p class="gray-4">A quick brown fox jumps over the lazy dog</p>
<p class="gray-3">A quick brown fox jumps over the lazy dog</p>
<p class="gray-2">A quick brown fox jumps over the lazy dog</p>
<p class="gray-1">A quick brown fox jumps over the lazy dog</p>

Aligned Text

A quick brown fox jumps over the lazy dog

              
<p class="text-left">A quick brown fox jumps over the lazy dog</p>
<p class="text-center">A quick brown fox jumps over the lazy dog</p>
<p class="text-right">A quick brown fox jumps over the lazy dog</p>

Slider

The slider component allows you to create a slider that can be used to display audio seek, pricing etc.

Slider

To use a styled slider add a class .slider to the range input

              
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

Disabled Slider

To use a disabled slider add a disabled attribute to the range input

              
<input disabled="" type="range" min="1" max="100" value="50" class="slider" id="myRange">