tarunsankhla

 <div class="card">
  <img class="card-img" src="../assets/Img/chad-montano-MqT0asuoIcU-unsplash.jpg" alt="Food Image" srcset=""/>

  <div class="card-content">
      <div class="card-title">
          <h1>Breakfast Story</h1>
          <h3>by Tarun</h3>
      </div>   
      <div class="card-body">
          We went across globe and covered a range of first meal of the day story.

tarunsankhla

  <div class="image-container">
  <h3>image</h3>

      <img src="../assets/Img/r-du-plessis-SGJzNs1ak6s-unsplash.jpg" style="width: 30rem; height: 30rem;"
      class="image-round" alt="round image">
      <img src="../assets/Img/alexander-schimmeck-R5IxlpyynrI-unsplash.jpg" class="image-responsive" alt="responsive image">

  </div>

tarunsankhla

  <div class="button-collection">
    <button class="btn btn-icon"><span class="material-icons-round">save_as</span>Edit</button>
    <button class="btn btn-sucess btn-icon"><span class="material-icons-round"> book </span>Save</button>
    <button class="btn btn-warning btn-icon"><span class="material-icons-round">delete_forever</span>Delete</button>
</div>
<h3>Outline Button</h3>
<div class="button-collection">
    <button class="btn btn-outline btn-icon"><span class="material-icons-round">save_as</span>Edit</button></button>
    <button class="btn btn-outline-sucess btn-icon"><span class="material-icons-round">book</span>Save</button>
    <button class="btn btn-outline-warning btn-icon"><span class="material-icons-round">delete_sweep</span>Remove</button>

tarunsankhla

<legend class="divider">Alert</legend>
<div>Alerts are for displaying message based on user action and mostly used for communicating the state of system. <br/>
    You can use the className of alert and it will set the default size. <br/>
    It also contains variation in outline and based on usecase like
    <br/>
    Sucess :
    <li>alert-outline-sucess</li> 
    <li>alert-sucess</li><br/>  
    Warning :
    <li>alert-outline-warning</li> 

tarunsankhla

   <div class="content-title">Badges on Icon</div>
    <div class="badge-collection">
        <div class="badge-container">
            <span class="material-icons-round drawer-icons">
                inbox
                </span>
            <div class="badge topright-badge"></div>            
        </div>
        <div class="badge-container">
            <span class="material-icons-round  drawer-icons">

tarunsankhla

  <div class="container-avatar-body">
    <img  class="avatar img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">

    <img class="avatar avatar-md img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">

    <img  class="avatar avatar-lg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">

    <img  class="avatar avatar-xlg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
    <img  class="avatar avatar-xxlg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
</div>

tarunsankhla

<div class="divider"><h3>Modal Drawer</h3></div>
                        <div class="drawer_filler overlay-filler ">
                            <div class="drawer-container-overlay drawer-overlay">
                                <div class="drawer-container-body drawer-close-modal">X</div>
                                <div class="drawer-container-body">
                                    <h1>Mail </h1>
                                    <div>email@material.io</div>
                                </div>
                                <div class="drawer-container-body">
                                    <div class="drawer-container-body-elements">

tarunsankhla

 <div class="divider"><h3>Dismissible Drawer</h3></div>
<div class="drawer_filler overlay-filler drawer-push">
    <div class="drawer-container-overlay">
        <div class="drawer-container-body">
            <h1>Mail </h1>
            <div>email@material.io</div>
        </div>
        <div class="drawer-container-body">
            <div class="drawer-container-body-elements">
                <label class="drawer-container-body-label">Label</label>

tarunsankhla

  <div class="divider"><h3>Permanent Drawer</h3></div>
<div class="drawer_filler">
    <div class="drawer-container-permanent">
        <div class="drawer-container-header">
            <h1>Mail</h1>
            <div>email@material.io</div>
        </div>
        <div class="drawer-container-body">
            <div class="drawer-container-body-elements">
                <label class="drawer-container-body-label">Label</label>

tarunsankhla

 <div class="container-avatar-body">
                                <img  class="avatar img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
                    
                                <img class="avatar avatar-md img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
                    
                                <img  class="avatar avatar-lg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
                    
                                <img  class="avatar avatar-xlg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
                                <img  class="avatar avatar-xxlg img-round" src="../assets/Img/tim-bish-WbC9XIlQb4k-unsplash.jpg" alt="" srcset="">
                            </div>