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.

Fonts and Icons

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

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!

    
  
    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!

Avatar

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

Demo

Badge

Badges are used to display text or status.

Pill Badges

Primary Secondary Success Warning

              
Primary
Secondary
Success
Warning

Example of Text with Badge new

    

  Example of Text with Badge
  new

Avatar Badges

Icon Badge

Button

Buttons are used to trigger an action.

Demo

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

              

  
    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

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

              

  
  
    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

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

              

  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

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

              

  
     Out of Stock
  
  
    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

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.

              

  
  Lorem ipsum dolor sit amet consectetur adipisicing elit.


  
  Lorem ipsum dolor sit amet consectetur adipisicing elit.


  
  Lorem ipsum dolor sit amet consectetur adipisicing elit.


  
  Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

List

Lists are used to display a list of items.

Unordered List

Item 1
Item 2
Item 3
Item 4

              

  Item 1
  Item 2
  Item 3
  Item 4

List Style Circle

Item 1
Item 2
Item 3
Item 4

              

  Item 1
  Item 2
  Item 3
  Item 4

List Style Square

Item 1
Item 2
Item 3
Item 4

              

  Item 1
  Item 2
  Item 3
  Item 4

List Style Roman

Item 1
Item 2
Item 3
Item 4

              

  Item 1
  Item 2
  Item 3
  Item 4

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

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

              

  COLUMN 1
  COLUMN 2
  COLUMN 1
  COLUMN 2

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

              

  COLUMN 1
  COLUMN 2
  COLUMN 3
  COLUMN 1
  COLUMN 2
  COLUMN 3

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.

Rounded Image

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

Modal

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

Modal

              

  
    
      Modal Title
    
    
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis blanditiis,
        explicabo deleniti rerum.

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

Input

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

Demo

Input with Validation

Please enter a valid email.

              

  
   Please enter a valid email.

Text

There are various txt utilities available in Max UI

Headings

A quick brown fox jumps over the lazy dog

              
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog

Gray Text

A quick brown fox jumps over the lazy dog

              
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog

Aligned Text

A quick brown fox jumps over the lazy dog

              
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog
A quick brown fox jumps over the lazy dog

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

Disabled Slider

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