MessageBanner

Using this Component

1. Confirm that you have references to Fabric's CSS and JavaScript on your page:

   			<link rel="stylesheet" href="fabric.min.css" />
   <link rel="stylesheet" href="fabric.components.min.css" />
   <script src="fabric.min.js"></script>
   		

2. Copy the HTML from one of the samples below into your page. For example:

   <div class="ms-MessageBanner">
     <div class="ms-MessageBanner-content">
       <div class="ms-MessageBanner-text">
         <div class="ms-MessageBanner-clipper">
           You have reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
         </div>
       </div>
       <button class="ms-MessageBanner-expand">
         <i class="ms-Icon ms-Icon--ChevronDown"></i>
       </button>
       <div class="ms-MessageBanner-action">
         <button class="ms-Button ms-Button--primary">
           <span class="ms-Button-label">Get More Storage</span> 
         </button>
       </div>
     </div>
     <button class="ms-MessageBanner-close">
       <i class="ms-Icon ms-Icon--Clear"></i>
     </button>
   </div>

3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all MessageBanner components on the page:

   <script type="text/javascript">
     var MessageBanner = new fabric['MessageBanner'](MessageBannerExample.querySelector('.ms-MessageBanner'));
   </script>

4. Replace the sample HTML content with your content.