Avatar

Avatar is used to display an icon of particular person or character.Monad UI has different types of Avatar

Avatar Small

<img  src="/image/male.jpg" alt="avatar small male" class="avatar avatar--sm">

<img  src="/image/female.png" alt="avatar small female" class="avatar avatar--sm">

Avatar Medium

<img  src="/image/male1.jpg" alt="avatar small male" class="avatar avatar--md">

<img  src="/image/female2.png" alt="avatar small female" class="avatar avatar--md">

Avatar Large

<img  src="/image/male1.jpg" alt="avatar small male" class="avatar avatar--lg">

<img  src="/image/female2.jpg" alt="avatar small female" class="avatar avatar--lg">

Avatar Extra Large

<img  src="/image/male1.jpg" alt="avatar small male" class="avatar avatar--xl">

<img  src="/image/female2.png" alt="avatar small female" class="avatar avatar--xl">

Avatar

Avatar rounded is the avatar in the shape of circle.

Avatar Rounded Small

<img  src="/image/male.jpg" alt="avatar small male" class="avatar avatar-rounded avatar--sm">

<img  src="/image/female.png" alt="avatar small female" class="avatar avatar-rounded avatar--sm">

Avatar Rounded Medium

<img  src="/image/male.jpg" alt="avatar small male" class="avatar avatar-rounded avatar--md">

<img  src="/image/female.png" alt="avatar small female" class="avatar avatar-rounded avatar--md">

Avatar Rounded Large

<img  src="/image/male.jpg" alt="avatar small male" class="avatar avatar-rounded avatar--lg">

<img  src="/image/female.png" alt="avatar small female" class="avatar avatar-rounded avatar--lg">

Avatar Rounded Extra Large

<img  src="/image/male.jpg" alt="avatar small male" class="avatar avatar-rounded avatar--xl">

<img  src="/image/female.png" alt="avatar small female" class="avatar avatar-rounded avatar--xl">

Alert

Alert is used to display the message to the user. It can be used for success warning, error etc.

Alert Error

There was an error processing your request

<div class="alert alert--error">
<img src="/image/success.png" alt="alert error" class="alert__img">
<span class="alert--text">There was an error processing your request</span>
</div>

Alert success

Data uploaded to the server. Fire on!

<div class="alert alert--success">
<img src="/image/success.png" alt="alert success" class="alert__img">
<span class="alert--text">Data uploaded to the server. Fire on!</span>
</div>

Alert Info

Seems your account is about expire, upgrade now

<div class="alert alert--info">
<img src="/image/info.png" alt="alert info" class="alert__img">
<span class="alert--text">Seems your account is about expire, upgrade now</span>
</div>

Alert warning

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

<div class="alert alert--warning">
   <img src="/image/warning.png" alt="alert warning" class="alert__img">
   <span class="alert--text">---- is going live on August 30th. Get ready!</span>
</div>

Alert Composition

Application submitted!

Thanks for submitting your application. Our team will get back to you soon.

<div class="alert-composition-container">
   <div class="alert-composition">
      <img src="/image/success.png" alt="alert component" class="alert--component-img">
      <h2 class="alert--heading">Application submitted!</h2>
      <p class="alert__component--text">Thanks for submitting your application. Our
        team will get back to you soon.
        </p>
    </div>
</div>

Badge

Badge is used to display the notification or status.

Badge on icons

101

<div class="badge">
        <img src="/image/badge_image/email.png" alt="" class="badge__img" >
        <span class="badge__text" >7</span>
</div>
<div class="badge">
        <img src="/image/badge_image/whatsapp.png" alt="" class="badge__img" >
        <span class="badge__text badge--two-unit" >11</span>
</div>
                
<div class="badge">
        <img src="/image/badge_image/whatsapp.png" alt="" class="badge__img" >
        <span class="badge__text badge--three-digit" >101</span>
</div>

Badge on Avatars

101

<div class="badge">
        <img src="/image/badge_image/email.png" alt="" class="badge__img" >
        <span class="badge__text" >7</span>
</div>
<div class="badge">
        <img src="/image/badge_image/whatsapp.png" alt="" class="badge__img" >
        <span class="badge__text badge--two-unit" >11</span>
</div>
                
<div class="badge">
        <img src="/image/badge_image/whatsapp.png" alt="" class="badge__img" >
        <span class="badge__text badge--three-digit" >101</span>
</div>

Button

Button is used for different different tasks such as clicking on an event or submitting a form

Button primary and Success

<button class="btnTag btnTag--regular" >Primary</button>
<button class="btnTag btnTag--success" >Success</button>

Button with icon

<button class="btnTag btnTag--icon btnTag--delete">
  <img src="/image/button_image/delete.png" alt="">
    <span class="btnTag__text">Delete</span>
</button>

Button float

<button class="btnTag btnTag--float">
   <img src="/image/button_image/add.png" class="image--float" alt="image float add">
    </button>

Button with Link

<a href="#"><button class="btnTag btnTag--save">Save</button></a> 
<a href="#"><button class="btnTag btnTag--cancel">Cancel</button></a>

Card's

Cards can be used to display about any product information Monad UI had 6 types of card display

Card vertical

Boat & the River

by Shreyash Mahajan

When boat does not know where to go it just floats with the flow of the river.

<div class="card">
    <img src="/image/card_image/river.jpg" alt="Boat and river" class="card__img">
        <div class="card__title-box">
            <h2 class="card__heading">Boat & the River</h2>
            <p class="card__sub-title">by Shreyash Mahajan</p>
        </div>
            <p class="card--content">When boat does not know where to go it just floats
                with the flow of the river.
             </p>
         <div class="card__footer">
                <div class="card__btn-list">
                    <button class="btnTag btnTag--card">READ</button>
                        <button class="btnTag btnTag--card" >SAVE</button>
                    </div>
                <div class="card--icon">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                 </div>
            </div>
  </div>

Card vertical with shadow

Boat & the River

by Shreyash Mahajan

When boat does not know where to go it just floats with the flow of the river.

<div class="card card--shadow">
    <img src="/image/card_image/river.jpg" alt="Boat and river" class="card__img">
        <div class="card__title-box">
            <h2 class="card__heading">Boat & the River</h2>
            <p class="card__sub-title">by Shreyash Mahajan</p>
        </div>
            <p class="card--content">When boat does not know where to go it just floats
                with the flow of the river.
             </p>
         <div class="card__footer">
                <div class="card__btn-list">
                    <button class="btnTag btnTag--card">READ</button>
                        <button class="btnTag btnTag--card" >SAVE</button>
                    </div>
                <div class="card--icon">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                 </div>
            </div>
  </div>

Card with badges on icon

Boat & the River

by Shreyash Mahajan

When boat does not know where to go it just floats with the flow of the river.

<div class="card card--shadow">
    <img src="/image/card_image/river-dark.jpg" alt="Boat and river" class="card__img">
        <div class="card__title-box">
            <h2 class="card__heading">Boat & the River</h2>
            <p class="card__sub-title">by Shreyash Mahajan</p>
          </div>
        <p class="card--content">When boat does not know where to go it just floats
                            with the flow of the river.
          </p>
             <div class="card__footer">
                          
              <div class="card--icon card--icon-badge">
                      <div class="badge card--badge">
                           <img src="/image/card_image/notify.png" alt="notify" class="icon__img">
                                 <span class="badge__text">10</span>
                          </div>
                       <div class="badge card--badge">
                            <img src="/image/card_image/setting.png" alt="setting" class="icon__img">
                                 <span class="badge__text">10</span>
                        </div>
                        <div class="badge card--badge">
                            <img src="/image/card_image/home.png" alt="home" class="icon__img">
                                  <span class="badge__text">10</span>
                        </div>
                               
                 </div>
                </div>
           </div>

Card with text over images

Boat & the River

by Shreyash Mahajan

When boat does not know where to go it just floats with the flow of the river.

<div class="card card--over-lay card--shadow">
        <img src="/image/card_image/river-dark.jpg" alt="Boat and river" class="card__img">
          <div class="card__title-box card__title--over-lay">
               <h2 class="card__heading">Boat & the River</h2>
                <p class="card__sub-titl">by Shreyash Mahajan</p>
                </div>
            <p class="card--content">When boat does not know where to go it just floats
                            with the flow of the river.
              </p>
        <div class="card__footer">
            <div class="card__btn-list">
                    <button class="btnTag btnTag--card">READ</button>
                    <button class="btnTag btnTag--card" >SAVE</button>
                        </div>
            <div class="card--icon">
                               
                <img src="/image/card_image/like.png" alt="like" class="icon__img">
                <img src="/image/card_image/home.png" alt="home" class="icon__img">
                <img src="/image/card_image/notify.png" alt="notify" class="icon__img">
                             
                               
                </div>
            </div>
        </div>

Card Horizontal

Boat & the River

When boat does not know where to go, it just floats with the flow of the river.

<div class="card card--shadow card--horizontal">
    <img src="/image/card_image/sunrise.png" alt="Boat and river" class="card__img card__img-horizontal">
    <div class="card--horizontal-box">
         <h3 class="card__heading card__heading--horizontal">Boat & the River</h3>
          <p class="card--content">When boat does not know where to go, it just floats
                        with the flow of the river.
          </p>    
    </div>
</div>

Card without images

Boat & the River

by Shreyash Mahajan

When boat does not know where to go it just floats with the flow of the river.

<div class="card card--shadow">
       <img src="/image/card_image/river.jpg" alt="Boat and river" class="card__img" style="display: none;">
            <div class="card__title-box">
               <h2 class="card__heading">Boat & the River</h2>
                <p class="card__sub-title">by Shreyash Mahajan</p>
                   </div>
                 <p class="card--content">When boat does not know where to go it just floats
                        with the flow of the river.
                  </p>
            <div class="card__footer">
                  <div class="card__btn-list">
                       <button class="btnTag btnTag--card">READ</button>
                        <button class="btnTag btnTag--card" >SAVE</button>
                  </div>
              <div class="card--icon">
                     <img src="/image/card_image/home.png" alt="home" class="icon__img">
                     <img src="/image/card_image/like.png" alt="like" class="icon__img">
                      <img src="/image/card_image/notify.png" alt="notify" class="icon__img">
                 </div>
                    </div>
        </div>

Input Fields

Input fields are used to take input from the user. There are so many types of input fields in Monad UI

Responsive Input fields

<input type="text" class="input" placeholder="primary">
<input type="text" class="input input--success" placeholder="success" >
<input type="text" class="input input--danger" placeholder="danger">
<input type="text" class="input input--warning" placeholder="warning">

Inline and Input error style

Password do not match

Successfuly password changed

Not so strong password

<div class="inline-container">
        <input type="text" class="inline inline--error">
        <span class="inline--text text-error">Password do not match</span>
</div>

<nav class="nav-bar">
    <h2 class="nav__heading"><a href="#" class="nav-bar--link">Heading</a> </h2>
        <ul class="nav-bar--list">
            <li class="nav-bar--item"><a href="#" class="nav-bar--link">Home</a> </li>
            <li class="nav-bar--item"><a href="#" class="nav-bar--link">Services</a> </li>
            <li class="nav-bar--item"><a href="#" class="nav-bar--link">About</a> </li>
            <li class="nav-bar--item"><a href="#" class="nav-bar--link">Careers</a> </li>
        </ul>
                 
    <div class="nav-bar--search">
            <input type="text" class="nav__input--search" placeholder="search">
                <button class="btn__nav--search">Search</button>
        </div>
</nav>

Responsive Images

Responsive images means it adjust with the change in size of browser.

Image simple

<img src="/image/responsive_image/bicycle.jpg" alt="responsive image" class="img--responsive">

Image rounded

<img src="/image/responsive_image/momo.jpg" alt="responsive image" class="img--responsive img--rounded">

Toast

Toast is a popup which is used to give message. There can be

Toast

Here is some text

    <div class="toast-container">
            <button class="btn toast--baseline" >click here</button>
    </div>
                    
    <div id="snackbar">Here is some text</div>

Text utilities

There are three types of heading in Monad UI.

Simple Heading

This is Heading

<p class="heading--one">This is Heading</p>
<p class="heading--two">This is Heading</p>
<p class="heading--three">This is Heading</p>
<p class="heading--four">This is Heading</p>

Gray Heading

This is Heading

<p class="heading--one heading--gray">This is Heading</p>
<p class="heading--two heading--gray">This is Heading</p>
<p class="heading--three heading--gray">This is Heading</p>
<p class="heading--four heading--gray">This is Heading</p>

Simple Heading

This is Heading

<p class="heading--one">This is Heading</p>
<p class="heading--two">This is Heading</p>
<p class="heading--three">This is Heading</p>
<p class="heading--four">This is Heading</p>

List

List is used to display a series of element. It can be used inside a sidebar also

List simple

Item 1
Item 1
Item 1
Item 1

   <ul class="list non-bullet">
         <li class="list--simple">Item 1</li>
         <li class="list--simple">Item 1</li>
         <li class="list--simple">Item 1</li>
         <li class="list--simple">Item 1</li>
    </ul>

List stacked

Item 1
Item 1
Item 1
Item 1

    <ul class="list non-bullet">
        <li class="list--simple">Item 1</li>
        <li class="list--simple">Item 1</li>
        <li class="list--simple">Item 1</li>
        <li class="list--simple">Item 1</li>
    </ul>

Rating

Rating is used to show the graphical representation of user rating. It can be used in ecommerce.

Rating

<div class="rating-container">
        <img src="/image/star_yellow.png" class="rating__img" />
        <img src="/image/star_yellow.png" class="rating__img" />
        <img src="/image/star_yellow.png" class="rating__img" />
        <img src="/image/star_black.png" class="rating__img"/>
        <img src="/image/star_black.png" class="rating__img"/>
    </div>

Grid

Grid is can be used to divide the page into portion of different layout. In monad UI we have two layout

Grid two simplified

content 1

content 2

content 3

content 4

                    <div class="component-display">
                        <div class="grid-two" >
                            <div class="grid--item"> content 1</div>
                            <div class="grid--item"> content 2 </div>
                            <div class="grid--item">content 3</div>
                            <div class="grid--item">content 4</div>
                        </div>
                  </div>

Grid three simplified

content 1

content 2

content 3

content 4

                    <div class="grid-three" >
                        <div class="grid--item"> content 1</div>
                        <div class="grid--item"> content 2 </div>
                        <div class="grid--item">content 3</div>
                        <div class="grid--item">content 4</div>
                    </div>

Avatar

Avatar Small

Avatar Medium

Avatar Large

Avatar Extra Large

Avatar

Avatar Rounded Small

Avatar Rounded Medium

Avatar Rounded Large

Avatar Rounded Extra Large

Alert

Alert Error

Alert success

Alert Info

Alert warning

Alert Composition

Application submitted!

Badge

Badge on icons

Badge on Avatars

Button

Button primary and Success

Button with icon

Button float

Button with Link

Card's

Card vertical

Boat & the River

Card vertical with shadow

Boat & the River

Card with badges on icon

Boat & the River

Card with text over images

Boat & the River

Card Horizontal

Boat & the River

Card without images

Boat & the River

Input Fields

Responsive Input fields

Inline and Input error style

Navigation Menu

Responsive Images

Image simple

Image rounded

Toast

Toast

Text utilities

Simple Heading

Gray Heading

Simple Heading

List

List simple

List stacked

Modal

Modal

Heading

Rating

Rating

Grid

Grid two simplified

Grid three simplified