patternfly-sass 3.3.6 → 3.4.0

data/spec/html/index.html

@@ -199,9 +199,15 @@
             <li>
               <a href="form.html">Form</a>
             </li>
+            <li>
+              <a href="horizontal-navigation.html">Horizontal Navigation</a>
+            </li>
             <li>
               <a href="login.html">Login</a>
             </li>
+            <li>
+              <a href="notifications-drawer.html">Notifications Drawer</a>
+            </li>
             <li>
               <a href="tab.html">Tab</a>
             </li>

data/spec/html/list-view.html

@@ -405,7 +405,7 @@
     });
   });
 </script>
-<div class="list-group list-view-pf">
+<div class="list-group list-view-pf list-view-pf-equalized-column">
   <div class="list-group-item">
     <div class="list-view-pf-main-info">
       <div class="list-view-pf-left">
@@ -423,7 +423,7 @@
         <div class="list-view-pf-additional-info">
           <div class="list-view-pf-additional-info-item">
             <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
+            <strong>108</strong> Hosts
           </div>
           <div class="list-view-pf-additional-info-item">
             <span class="pficon pficon-cluster"></span>
@@ -477,7 +477,7 @@
         <div class="list-view-pf-additional-info">
           <div class="list-view-pf-additional-info-item">
             <span class="pficon pficon-screen"></span>
-            <strong>8</strong> Hosts
+            <strong>108</strong> Hosts
           </div>
           <div class="list-view-pf-additional-info-item">
             <span class="pficon pficon-cluster"></span>
@@ -515,6 +515,15 @@
     </div>
   </div>
 </div>
+<script>
+  // Equalize column width
+  $(document).ready(function () {
+  	var widest = 0;
+  	$('.list-view-pf-equalized-column .list-view-pf-additional-info-item').each( function() {
+  		widest = $(this).width() > widest ? $(this).width() : widest;
+  	}).width(widest);
+  });
+</script>
 <div class="list-group list-view-pf">
   <div class="list-group-item list-view-pf-stacked list-view-pf-top-align">
     <div class="list-view-pf-checkbox">

data/spec/html/navbar.html

@@ -44,92 +44,6 @@
       <hr>
       <h2>Primary Navigation Bar</h2>
       <nav class="navbar navbar-default navbar-pf" role="navigation">
-  <div class="navbar-header">
-    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
-      <span class="sr-only">Toggle navigation</span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </button>
-    <a class="navbar-brand" href="/">
-      <img src="../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
-    </a>
-  </div>
-  <div class="collapse navbar-collapse navbar-collapse-1">
-    <ul class="nav navbar-nav navbar-utility">
-      <li>
-        <a href="#">Status</a>
-      </li>
-      <li class="dropdown">
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-          <span class="pficon pficon-user"></span>
-          Brian Johnson <b class="caret"></b>
-        </a>
-        <ul class="dropdown-menu">
-          <li>
-            <a href="#">Link</a>
-          </li>
-          <li>
-            <a href="#">Another link</a>
-          </li>
-          <li>
-            <a href="#">Something else here</a>
-          </li>
-          <li class="divider"></li>
-          <li class="dropdown-submenu">
-            <a tabindex="-1" href="#">More options</a>
-            <ul class="dropdown-menu">
-              <li>
-                <a href="#">Link</a>
-              </li>
-              <li>
-                <a href="#">Another link</a>
-              </li>
-              <li>
-                <a href="#">Something else here</a>
-              </li>
-              <li class="divider"></li>
-              <li class="dropdown-header">Nav header</li>
-              <li>
-                <a href="#">Separated link</a>
-              </li>
-              <li class="divider"></li>
-              <li>
-                <a href="#">One more separated link</a>
-              </li>
-            </ul>
-          </li>
-          <li class="divider"></li>
-          <li>
-            <a href="#">One more separated link</a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <ul class="nav navbar-nav navbar-primary">
-      <li>
-        <a href="#">First Link</a>
-      </li>
-      <li>
-        <a href="#">Another Link</a>
-      </li>
-      <li>
-        <a href="#">And Another</a>
-      </li>
-      <li>
-        <a href="#">As a General Rule</a>
-      </li>
-      <li>
-        <a href="#">Five to Seven Links</a>
-      </li>
-      <li>
-        <a href="#">Is Good</a>
-      </li>
-    </ul>
-  </div>
-</nav>
-      <hr>
-      <nav class="navbar navbar-default navbar-pf" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
             <span class="sr-only">Toggle navigation</span>
@@ -196,7 +110,7 @@
             <li>
               <a href="#">First Link</a>
             </li>
-            <li class="active">
+            <li>
               <a href="#">Another Link</a>
             </li>
             <li>
@@ -214,6 +128,92 @@
           </ul>
         </div>
       </nav>
+      <hr>
+      <nav class="navbar navbar-default navbar-pf" role="navigation">
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="/">
+      <img src="../dist/img/brand.svg" alt="PatternFly Enterprise Application" />
+    </a>
+  </div>
+  <div class="collapse navbar-collapse navbar-collapse-1">
+    <ul class="nav navbar-nav navbar-utility">
+      <li>
+        <a href="#">Status</a>
+      </li>
+      <li class="dropdown">
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+          <span class="pficon pficon-user"></span>
+          Brian Johnson <b class="caret"></b>
+        </a>
+        <ul class="dropdown-menu">
+          <li>
+            <a href="#">Link</a>
+          </li>
+          <li>
+            <a href="#">Another link</a>
+          </li>
+          <li>
+            <a href="#">Something else here</a>
+          </li>
+          <li class="divider"></li>
+          <li class="dropdown-submenu">
+            <a tabindex="-1" href="#">More options</a>
+            <ul class="dropdown-menu">
+              <li>
+                <a href="#">Link</a>
+              </li>
+              <li>
+                <a href="#">Another link</a>
+              </li>
+              <li>
+                <a href="#">Something else here</a>
+              </li>
+              <li class="divider"></li>
+              <li class="dropdown-header">Nav header</li>
+              <li>
+                <a href="#">Separated link</a>
+              </li>
+              <li class="divider"></li>
+              <li>
+                <a href="#">One more separated link</a>
+              </li>
+            </ul>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a href="#">One more separated link</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav navbar-primary">
+      <li>
+        <a href="#">First Link</a>
+      </li>
+      <li class="active">
+        <a href="#">Another Link</a>
+      </li>
+      <li>
+        <a href="#">And Another</a>
+      </li>
+      <li>
+        <a href="#">As a General Rule</a>
+      </li>
+      <li>
+        <a href="#">Five to Seven Links</a>
+      </li>
+      <li>
+        <a href="#">Is Good</a>
+      </li>
+    </ul>
+  </div>
+</nav>
       <hr>
       <h2>Context Selector</h2>
       <nav class="navbar navbar-default navbar-pf" role="navigation">

data/spec/html/notifications-drawer.html

@@ -0,0 +1,1624 @@
+<!DOCTYPE html>
+<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf layout-pf-fixed"><![endif]-->
+<!--[if gt IE 9]><!-->
+<html lang="en-us" class="layout-pf layout-pf-fixed">
+  <!--<![endif]-->
+    <head>
+    <title>Notifications Drawer - PatternFly</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="../dist/img/favicon.ico">
+    <!-- iPad retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
+    <!-- iPad retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
+    <!-- iPad non-retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
+    <!-- iPad non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
+    <!-- iPhone 6 Plus icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
+    <!-- iPhone retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
+    <!-- iPhone non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
+    <link rel="stylesheet" href="../dist/css/patternfly.min.css" >
+    <link rel="stylesheet" href="../dist/css/patternfly-additions.min.css" >
+    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.6.0/jquery.matchHeight-min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.min.js"></script>
+    <script src="../dist/js/patternfly.min.js"></script>
+  </head>
+  <div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
+    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
+      <span class="pficon pficon-close"></span>
+    </button>
+    <span class="pficon pficon-warning-triangle-o"></span>
+    These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
+  </div>
+
+  <body class="cards-pf">
+    <nav class="navbar navbar-pf-vertical">
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a href="/" class="navbar-brand">
+      <img class="navbar-brand-icon" src="../dist/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="../dist/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
+    </a>
+  </div>
+  <nav class="collapse navbar-collapse">
+    <ul class="nav navbar-nav">
+      <li><a href="#" target="_blank" class="nav-item-iconic nav-item-iconic-new-window"><span title="Launch" class="fa fa-external-link"></span></a></li>
+    </ul>
+    <ul class="nav navbar-nav navbar-right navbar-iconic">
+      <li class="drawer-pf-trigger dropdown">
+        <a class="nav-item-iconic drawer-pf-trigger-icon">
+          <span class="fa fa-bell" title="Notifications"></span><!-- In case of all notifications read, the icon should be fa-bell-o -->
+        </a>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span title="Help" class="fa pficon-help"></span>
+          <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+          <li><a href="#">Help</a></li>
+          <li><a href="#">About</a></li>
+        </ul>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+          <span title="Username" class="fa pficon-user"></span>
+          <span class="caret"></span>
+        </a>
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+          <li><a href="#">Preferences</a></li>
+          <li><a href="#">Logout</a></li>
+        </ul>
+      </li>
+    </ul>
+    <div class="drawer-pf hide drawer-pf-notifications-non-clickable">
+      <div class="drawer-pf-title">
+        <h3 class="text-center">Notifications Drawer</h3>
+      </div>
+      <div class="panel-group" id="notification-drawer-accordion">
+        <div class="panel panel-default">
+          <div class="panel-heading" data-component="collapse-heading">
+            <h4 class="panel-title">
+              <a data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseOne">
+                Notification Tab 1
+              </a>
+            </h4>
+            <span class="panel-counter">5 New Events</span>
+          </div>
+          <div id="fixedCollapseOne" class="panel-collapse collapse in">
+            <div class="panel-body">
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+            </div>
+          </div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading" data-component="collapse-heading">
+            <h4 class="panel-title">
+              <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseTwo">
+                Notification Tab 2
+              </a>
+            </h4>
+            <span class="panel-counter">5 New Events</span>
+          </div>
+          <div id="fixedCollapseTwo" class="panel-collapse collapse">
+            <div class="panel-body">
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+              <div class="drawer-pf-loading text-center">
+                <span class="spinner spinner-xs spinner-inline"></span> Loading More
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="panel panel-default">
+          <div class="panel-heading" data-component="collapse-heading">
+            <h4 class="panel-title">
+              <a class="collapsed" data-toggle="collapse" data-parent="#notification-drawer-accordion" href="#fixedCollapseThree">
+                Notification Tab 3
+              </a>
+            </h4>
+            <span class="panel-counter">5 New Events</span>
+          </div>
+          <div id="fixedCollapseThree" class="panel-collapse collapse">
+            <div class="panel-body">
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+              <div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-info pull-left"></span>
+  <span class="drawer-pf-notification-message">A New Event! Huzzah! Bold!</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification unread">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-ok pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-warning-triangle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+<div class="drawer-pf-notification">
+  <div class="dropdown pull-right dropdown-kebab-pf">
+  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+    <span class="fa fa-ellipsis-v"></span>
+  </button>
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+    <li><a href="#">Action</a></li>
+    <li><a href="#">Another action</a></li>
+    <li><a href="#">Something else here</a></li>
+    <li role="separator" class="divider"></li>
+    <li><a href="#">Separated link</a></li>
+  </ul>
+</div>
+
+  <span class="pficon pficon-error-circle-o pull-left"></span>
+  <span class="drawer-pf-notification-message">Another Event Notification</span>
+  <div class="drawer-pf-notification-info">
+    <span class="date">3/31/16</span>
+    <span class="time">12:12:44 PM</span>
+  </div>
+</div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="drawer-pf-action">
+        <button class="btn btn-link">Mark All Read</button>
+      </div>
+    </div>
+  </nav>
+</nav> <!--/.navbar-->
+<script>
+  $(document).ready(function() {
+    // Show/Hide Notifications Drawer
+    $('.drawer-pf-trigger').click(function() {
+      var $drawer = $('.drawer-pf');
+
+      $(this).toggleClass('open');
+      if ($drawer.hasClass('hide')) {
+        $drawer.removeClass('hide');
+          $('#notification-drawer-accordion').initCollapseHeights();
+      } else {
+        $drawer.addClass('hide');
+      }
+    });
+    // Mark All Read
+    $('.drawer-pf-action .btn').click(function() {
+      $('.drawer-pf').find('.unread').removeClass('unread');
+    });
+
+    $('#notification-drawer-accordion').initCollapseHeights();
+  });
+</script>
+
+  <div class="nav-pf-vertical nav-pf-vertical-with-secondary-nav">
+
+  <ul class="list-group">
+    <li class="list-group-item active">
+      <a href="#">
+        <span class="fa fa-dashboard"></span>
+        <span class="list-group-item-value">Dashboard</span>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="pficon pficon-cluster"></span>
+        <span class="list-group-item-value">Clusters</span>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="pficon pficon-screen"></span>
+        <span class="list-group-item-value">Hosts</span>
+      </a>
+    </li>
+    <li class="list-group-item persistent-secondary" data-target="#storage-secondary">
+      <a href="#">
+        <span class="pficon pficon-container-node"></span>
+        <span class="list-group-item-value">Storage</span>
+      </a>
+<div id="storage-secondary" class="nav-pf-persistent-secondary">
+  <div class="persistent-secondary-header">
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
+    <span>Storage</span>
+  </div>
+  <h5>File</h5>
+  <ul class="list-group">
+    <li class="list-group-item active">
+      <a href="#">
+        <span class="list-group-item-value">Volumes</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-error-circle-o"></span>
+            <span>1</span>
+          </div>
+          <div class="badge">
+            <span class="pficon pficon-warning-triangle-o"></span>
+            <span>3</span>
+          </div>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Bricks</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-warning-triangle-o"></span>
+            <span>3</span>
+          </div>
+          <span class="badge">12</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Quotas</span>
+        <div class="badge-container-pf">
+          <span class="badge">3</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Logical Volumes</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-error-circle-o"></span>
+            <span>1</span>
+          </div>
+          <span class="badge">10</span>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <h5>Object</h5>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Pools</span>
+        <div class="badge-container-pf">
+          <span class="badge">10</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">OSDs</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-error-circle-o"></span>
+            <span>1</span>
+          </div>
+          <div class="badge">
+            <span class="pficon pficon-warning-triangle-o"></span>
+            <span>3</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <h5>Block</h5>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">RBDs</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-warning-triangle-o"></span>
+            <span>2</span>
+          </div>
+          <span class="badge">14</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Quotas</span>
+        <div class="badge-container-pf">
+          <span class="badge">0</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Snapshots</span>
+        <div class="badge-container-pf">
+          <div class="badge">
+            <span class="pficon pficon-warning-triangle-o"></span>
+            <span>3</span>
+          </div>
+          <span class="badge">9</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Storage Profiles</span>
+        <div class="badge-container-pf">
+          <span class="badge">7</span>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+
+    </li>
+    <li class="list-group-item persistent-secondary" data-target="#admin-secondary">
+      <a href="#">
+        <span class="fa fa-cog"></span>
+        <span class="list-group-item-value">Admin</span>
+      </a>
+<div id="admin-secondary" class="nav-pf-persistent-secondary">
+  <div class="persistent-secondary-header">
+    <a class="secondary-collapse-toggle-pf" href="#" data-toggle="collapse-secondary-nav"></a>
+    <span>Admin</span>
+  </div>
+  <h5>User Administration</h5>
+  <ul class="list-group">
+    <li class="list-group-item active">
+      <a href="#">
+        <span class="list-group-item-value">Users</span>
+        <div class="badge-container-pf">
+          <span class="badge">10</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Groups</span>
+        <div class="badge-container-pf">
+          <span class="badge">3</span>
+        </div>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Roles</span>
+        <div class="badge-container-pf">
+          <span class="badge">5</span>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <h5>Storage</h5>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Local Storage</span>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">History</span>
+        <div class="badge-container-pf">
+          <span class="badge">0</span>
+        </div>
+      </a>
+    </li>
+  </ul>
+
+  <h5>Preferences</h5>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Appearance</span>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Notifications</span>
+      </a>
+    </li>
+    <li class="list-group-item">
+      <a href="#">
+        <span class="list-group-item-value">Sound</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+    </li>
+  </ul>
+</div>
+
+<div class="container-fluid container-cards-pf container-pf-nav-pf-vertical container-pf-nav-pf-vertical-with-secondary">
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
+  <h2 class="card-pf-title">
+    <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
+  <h2 class="card-pf-title">
+    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
+      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status">
+  <h2 class="card-pf-title">
+    <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="card-pf card-pf-accented card-pf-aggregate-status">
+            <h2 class="card-pf-title">
+              <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+  <h2 class="card-pf-title">
+    <span class="fa fa-rebel"></span>
+    <span class="card-pf-aggregate-status-count">0</span> Ipsum
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+  <h2 class="card-pf-title">
+    <span class="fa fa-paper-plane"></span>
+    <a href="#">
+      <span class="card-pf-aggregate-status-count">20</span> Amet
+    </a>
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+  <h2 class="card-pf-title">
+    <span class="pficon pficon-cluster"></span>
+    <a href="#">
+      <span class="card-pf-aggregate-status-count">9</span> Adipiscing
+    </a>
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-aggregate-status-notifications">
+      <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
+    </p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-3">
+          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
+            <h2 class="card-pf-title">
+              <span class="pficon pficon-image"></span>
+              <a href="#">
+                <span class="card-pf-aggregate-status-count">12</span> Lorem
+              </a>
+            </h2>
+            <div class="card-pf-body">
+              <p class="card-pf-aggregate-status-notifications">
+                <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-6">
+<div class="card-pf">
+  <div class="card-pf-heading">
+    <h2 class="card-pf-title">
+      Top Utilized Clusters
+    </h2>
+  </div>
+  <div class="card-pf-body">
+    <div class="progress-description">
+      RHOS6-Controller
+    </div>
+    <div class="progress progress-label-top-right">
+      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"  data-toggle="tooltip" title="95% Used">
+        <span><strong>190.0 of 200.0 GB</strong> Used</span>
+      </div>
+      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
+        <span class="sr-only">5% Available</span>
+      </div>
+    </div>
+    <div class="progress-description">
+      CFMEQE-Cluster
+    </div>
+    <div class="progress progress-label-top-right">
+      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"  data-toggle="tooltip" title="50% Used">
+        <span><strong>100.0 of 200.0 GB</strong> Used</span>
+      </div>
+      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
+        <span class="sr-only">50% Available</span>
+      </div>
+    </div>
+    <div class="progress-description">
+      RHOS-Undercloud
+    </div>
+    <div class="progress progress-label-top-right">
+      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"  data-toggle="tooltip" title="70% Used">
+        <span><strong>140.0 of 200.0 GB</strong> Used</span>
+      </div>
+      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
+        <span class="sr-only">30% Available</span>
+      </div>
+    </div>
+    <div class="progress-description">
+      RHEL6-Controller
+    </div>
+    <div class="progress progress-label-top-right">
+      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;"  data-toggle="tooltip" title="76.5% Used">
+        <span><strong>153.0 of 200.0 GB</strong> Used</span>
+      </div>
+      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
+        <span class="sr-only">23.5% Available</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6">
+<div class="card-pf">
+  <div class="card-pf-heading">
+    <h2 class="card-pf-title">
+      Quotas
+    </h2>
+  </div>
+  <div class="card-pf-body">
+    <div class="progress-container progress-description-left progress-label-right">
+      <div class="progress-description">
+        CPU
+      </div>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
+          <span><strong>115 of 460</strong> MHz</span>
+        </div>
+        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
+          <span class="sr-only">75% Available</span>
+        </div>
+      </div>
+    </div>
+    <div class="progress-container progress-description-left progress-label-right">
+      <div class="progress-description">
+        Memory
+      </div>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">
+          <span><strong>8 of 16</strong> GB</span>
+        </div>
+        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">
+          <span class="sr-only">50% Available</span>
+        </div>
+      </div>
+    </div>
+    <div class="progress-container progress-description-left progress-label-right">
+      <div class="progress-description">
+        Pods
+      </div>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">
+          <span><strong>5 of 8</strong> Total</span>
+        </div>
+        <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">
+          <span class="sr-only">37.5% Available</span>
+        </div>
+      </div>
+    </div>
+    <div class="progress-container progress-description-left progress-label-right">
+      <div class="progress-description">
+        Services
+      </div>
+      <div class="progress">
+        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" data-toggle="tooltip" title="100% Used">
+          <span><strong>2 of 2</strong> Total</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+        <div class="col-md-12">
+<div class="card-pf card-pf-utilization">
+  <div class="card-pf-heading">
+    <p class="card-pf-heading-details">Last 30 days</p>
+    <h2 class="card-pf-title">
+      Utilization
+    </h2>
+  </div>
+  <div class="card-pf-body">
+    <div class="row">
+      <div class="col-xs-12 col-sm-4 col-md-4">
+        <h3 class="card-pf-subtitle">CPU</h3>
+        <p class="card-pf-utilization-details">
+          <span class="card-pf-utilization-card-details-count">50</span>
+            <span class="card-pf-utilization-card-details-description">
+              <span class="card-pf-utilization-card-details-line-1">Available</span>
+              <span class="card-pf-utilization-card-details-line-2">of 1000 MHz</span>
+            </span>
+        </p>
+        <div id="chart-pf-donut-1"></div>
+        <div class="chart-pf-sparkline" id="chart-pf-sparkline-1"></div>
+        <script>
+          var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
+          donutConfig.bindto = '#chart-pf-donut-1';
+          donutConfig.color =  {
+            pattern: ["#cc0000","#D1D1D1"]
+          };
+          donutConfig.data = {
+            type: "donut",
+            columns: [
+              ["Used", 95],
+              ["Available", 5]
+            ],
+            groups: [
+              ["used", "available"]
+            ],
+            order: null
+          };
+          donutConfig.tooltip = {
+            contents: function (d) {
+              return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                      Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
+                      '</span>';
+            }
+          };
+
+          var chart1 = c3.generate(donutConfig);
+          var donutChartTitle = d3.select("#chart-pf-donut-1").select('text.c3-chart-arcs-title');
+          donutChartTitle.text("");
+          donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
+          var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
+          sparklineConfig.bindto = '#chart-pf-sparkline-1';
+          sparklineConfig.data = {
+            columns: [
+              ['%', 10, 50, 28, 20, 31, 27, 60, 36, 52, 55, 62, 68, 69, 88, 74, 88, 95],
+            ],
+            type: 'area'
+          };
+          var chart2 = c3.generate(sparklineConfig);
+        </script>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4">
+        <h3 class="card-pf-subtitle">Memory</h3>
+        <p class="card-pf-utilization-details">
+          <span class="card-pf-utilization-card-details-count">256</span>
+            <span class="card-pf-utilization-card-details-description">
+              <span class="card-pf-utilization-card-details-line-1">Available</span>
+              <span class="card-pf-utilization-card-details-line-2">of 432 GB</span>
+            </span>
+        </p>
+        <div id="chart-pf-donut-2"></div>
+        <div class="chart-pf-sparkline" id="chart-pf-sparkline-2"></div>
+        <script>
+          var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
+          donutConfig.bindto = '#chart-pf-donut-2';
+          donutConfig.color =  {
+            pattern: ["#3f9c35","#D1D1D1"]
+          };
+          donutConfig.data = {
+            type: "donut",
+            columns: [
+              ["Used", 41],
+              ["Available", 59]
+            ],
+            groups: [
+              ["used", "available"]
+            ],
+            order: null
+          };
+          donutConfig.tooltip = {
+            contents: function (d) {
+              return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                      Math.round(d[0].ratio * 100) + '%' + ' GB ' + d[0].name +
+                      '</span>';
+            }
+          };
+
+          var chart3 = c3.generate(donutConfig);
+          var donutChartTitle = d3.select("#chart-pf-donut-2").select('text.c3-chart-arcs-title');
+          donutChartTitle.text("");
+          donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
+          var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
+          sparklineConfig.bindto = '#chart-pf-sparkline-2';
+          sparklineConfig.data = {
+            columns: [
+              ['%', 35, 36, 20, 30, 31, 22, 44, 36, 40, 41, 55, 52, 48, 48, 50, 40, 41],
+            ],
+            type: 'area'
+          };
+          var chart4 = c3.generate(sparklineConfig);
+        </script>
+      </div>
+      <div class="col-xs-12 col-sm-4 col-md-4">
+        <h3 class="card-pf-subtitle">Network</h3>
+        <p class="card-pf-utilization-details">
+          <span class="card-pf-utilization-card-details-count">200</span>
+            <span class="card-pf-utilization-card-details-description">
+              <span class="card-pf-utilization-card-details-line-1">Available</span>
+              <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
+            </span>
+        </p>
+        <div id="chart-pf-donut-3"></div>
+        <div class="chart-pf-sparkline" id="chart-pf-sparkline-3"></div>
+        <script>
+          var donutConfig = $().c3ChartDefaults().getDefaultDonutConfig('A');
+          donutConfig.bindto = '#chart-pf-donut-3';
+          donutConfig.color =  {
+            pattern: ["#EC7A08","#D1D1D1"]
+          };
+          donutConfig.data = {
+            type: "donut",
+            columns: [
+              ["Used", 85],
+              ["Available", 15]
+            ],
+            groups: [
+              ["used", "available"]
+            ],
+            order: null
+          };
+          donutConfig.tooltip = {
+            contents: function (d) {
+              return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                      Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
+                      '</span>';
+            }
+          };
+
+          var chart5 = c3.generate(donutConfig);
+          var donutChartTitle = d3.select("#chart-pf-donut-3").select('text.c3-chart-arcs-title');
+          donutChartTitle.text("");
+          donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
+          var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
+          sparklineConfig.bindto = '#chart-pf-sparkline-3';
+          sparklineConfig.data = {
+            columns: [
+              ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
+            ],
+            type: 'area'
+          };
+          var chart6 = c3.generate(sparklineConfig);
+        </script>
+      </div>
+    </div>
+  </div>
+</div>
+
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+        <div class="col-xs-12 col-sm-4 col-md-4">
+<div class="card-pf card-pf-utilization">
+  <h2 class="card-pf-title">
+    Network
+  </h2>
+  <div class="card-pf-body">
+    <p class="card-pf-utilization-details">
+      <span class="card-pf-utilization-card-details-count">200</span>
+        <span class="card-pf-utilization-card-details-description">
+          <span class="card-pf-utilization-card-details-line-1">Available</span>
+          <span class="card-pf-utilization-card-details-line-2">of 1300 Gbps</span>
+        </span>
+    </p>
+    <div id="chart-pf-donut-4"></div>
+    <div class="chart-pf-sparkline" id="chart-pf-sparkline-4"></div>
+    <script>
+      var c3ChartDefaults = $().c3ChartDefaults();
+
+      var donutConfig = c3ChartDefaults.getDefaultDonutConfig('A');
+      donutConfig.bindto = '#chart-pf-donut-4';
+      donutConfig.color =  {
+        pattern: ["#EC7A08","#D1D1D1"]
+      };
+      donutConfig.data = {
+        type: "donut",
+        columns: [
+          ["Used", 85],
+          ["Available", 15]
+        ],
+        groups: [
+          ["used", "available"]
+        ],
+        order: null
+      };
+      donutConfig.tooltip = {
+        contents: function (d) {
+          return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
+                  Math.round(d[0].ratio * 100) + '%' + ' Gbps ' + d[0].name +
+                  '</span>';
+        }
+      };
+
+      var chart1 = c3.generate(donutConfig);
+      var donutChartTitle = d3.select("#chart-pf-donut-4").select('text.c3-chart-arcs-title');
+      donutChartTitle.text("");
+      donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+      donutChartTitle.insert('tspan').text("Gpbs Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+
+      var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
+      sparklineConfig.bindto = '#chart-pf-sparkline-4';
+      sparklineConfig.data = {
+        columns: [
+          ['%', 60, 55, 70, 44, 31, 67, 54, 46, 58, 75, 62, 68, 69, 88, 74, 88, 85],
+        ],
+        type: 'area'
+      };
+
+      var chart2 = c3.generate(sparklineConfig);
+    </script>
+  </div>
+</div>
+
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-6 col-md-5">
+<div class="card-pf">
+  <div class="card-pf-heading">
+    <div class="dropdown card-pf-time-frame-filter">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        Last 30 Days <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li><a href="#">Last 60 Days</a></li>
+        <li><a href="#">Last 90 Days</a></li>
+      </ul>
+    </div>
+    <h2 class="card-pf-title">
+      Card Title
+    </h2>
+  </div>
+  <div class="card-pf-body">
+    <p>[card contents]</p>
+  </div>
+</div>
+
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-7">
+<div class="card-pf">
+  <h2 class="card-pf-title">
+    Card Title
+  </h2>
+  <div class="card-pf-body">
+    <p>[card contents]</p>
+  </div>
+  <div class="card-pf-footer">
+    <div class="dropdown card-pf-time-frame-filter">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        Last 30 Days <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <li><a href="#">Last 60 Days</a></li>
+        <li><a href="#">Last 90 Days</a></li>
+      </ul>
+    </div>
+    <p>
+      <a href="#" class="card-pf-link-with-icon">
+        <span class="pficon pficon-add-circle-o"></span>Add New Cluster
+      </a>
+    </p>
+  </div>
+</div>
+
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-12 col-sm-5 col-md-5">
+          <div class="card-pf">
+            <h2 class="card-pf-title">
+              Card Title
+            </h2>
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+            <div class="card-pf-footer">
+              <div class="dropdown card-pf-time-frame-filter">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                  Last 30 Days <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                  <li><a href="#">Last 60 Days</a></li>
+                  <li><a href="#">Last 90 Days</a></li>
+                </ul>
+              </div>
+              <p>
+                <a href="#" class="card-pf-link-with-icon">
+                  <span class="pficon pficon-flag"></span>View CPU Events
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-7 col-md-7">
+          <div class="card-pf">
+            <h2 class="card-pf-title">
+              Card Title
+            </h2>
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-6 col-sm-8 col-md-8">
+          <div class="card-pf">
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+            <div class="card-pf-footer">
+              <p><a href="#">Footer link</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-4 col-md-4">
+          <div class="card-pf">
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+            <div class="card-pf-footer">
+              <p><a href="#">Footer link</a></p>
+            </div>
+          </div>
+        </div>
+      </div><!-- /row -->
+      <div class="row row-cards-pf">
+      <!-- Important:  if you need to nest additional .row within a .row.row-cards-pf, do *not* use .row-cards-pf on the nested .row  -->
+        <div class="col-xs-6 col-sm-6 col-md-6">
+          <div class="card-pf">
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-6 col-md-6">
+          <div class="card-pf">
+            <div class="card-pf-body">
+              <p>[card contents]</p>
+            </div>
+          </div>
+        </div>
+      </div><!-- /row -->
+
+</div>
+<script>
+  $(document).ready(function() {
+    // matchHeight the contents of each .card-pf and then the .card-pf itself
+    $(".row-cards-pf > [class*='col'] > .card-pf .card-pf-title").matchHeight();
+    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
+    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-footer").matchHeight();
+    $(".row-cards-pf > [class*='col'] > .card-pf").matchHeight();
+
+    // initialize tooltips
+    $('[data-toggle="tooltip"]').tooltip();
+
+    // Initialize the vertical navigation
+    $().setupVerticalNavigation(true);
+  });
+</script>
+
+  </body>
+</html>