patternfly-sass 3.7.0 → 3.8.0

data/spec/html/wizard.html

@@ -26,8 +26,7 @@
     <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="//rawgit.com/jonmiles/bootstrap-treeview/v1.2.0/dist/bootstrap-treeview.min.js"></script>
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="../../dist/js/patternfly.min.js"></script>
   </head>
 
@@ -160,7 +159,7 @@
               <li class="list-group-item">
                 <a>
                   <span class="wizard-pf-substep-number">1B.</span>
-                  <span class="wizard-pf-substep-title">Progress</span>
+                  <span class="wizard-pf-substep-title">Settings</span>
                 </a>
               </li>
           </div><!-- /.wizard-pf-sidebar -->
@@ -232,13 +231,13 @@
 
           <div class="wizard-pf-sidebar">
             <ul class="list-group">
-              <li class="list-group-item">
+              <li class="list-group-item active">
                 <a>
                   <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
+                  <span class="wizard-pf-substep-title">Summary</span>
                 </a>
               </li>
-              <li class="list-group-item active">
+              <li class="list-group-item">
                 <a>
                   <span class="wizard-pf-substep-number">3B.</span>
                   <span class="wizard-pf-substep-title">Progress</span>
@@ -248,46 +247,87 @@
           </div><!-- /.wizard-pf-sidebar -->
 
           <div class="wizard-pf-main">
-            <div>
-              <div class="wizard-pf-review-page">
-                <div id="treeview1"></div>
-                <script>
-                  $(function() {
-                    var defaultData = [
-                      {
-                        text: 'First Step',
-                        state: {
-                          expanded: false
-                        },
-                        nodes: [
-                          {
-                            text: '1A: Details listed here'
-                          },
-                          {
-                            text: '1B: Progress listed here'}
-                        ]
-                      },
-                      {
-                        text: 'Second Step',
-                        nodes: [
-                          {
-                            text: '2A: Details listed here'
-                          },
-                          {
-                            text: '2B: Progress listed here'}
-                        ]
-                      }
-                    ];
-                    $('#treeview1').treeview({
-                      collapseIcon: "fa fa-angle-down",
-                      data: defaultData,
-                      expandIcon: "fa fa-angle-right",
-                      showBorder: false
-                    });
-                  });
-                </script>
-
-              </div>
+            <div class="wizard-pf-review-steps">
+              <ul class="list-group">
+                <li class="list-group-item">
+                  <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1').toggleClass('collapse');">First Step</a>
+                  <div id="reviewStep1" class="wizard-pf-review-substeps">
+                    <ul class="list-group">
+                      <li class="list-group-item">
+                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep1').toggleClass('collapse');">
+                          <span class="wizard-pf-substep-number">1A.</span>
+                          <span class="wizard-pf-substep-title">Details</span>
+                        </a>
+                        <div id="reviewStep1Substep1" class="wizard-pf-review-content">
+                          <form class="form">
+                            <div class="wizard-pf-review-item">
+                              <span class="wizard-pf-review-item-label">Name:</span>
+                              <span class="wizard-pf-review-item-value">First Last</span>
+                            </div>
+                            <div class="wizard-pf-review-item">
+                              <span class="wizard-pf-review-item-label">Description:</span>
+                              <span class="wizard-pf-review-item-value">This is the description</span>
+                            </div>
+                          </form>
+                        </div>
+                      </li>
+                      <li class="list-group-item">
+                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep1Substep2').toggleClass('collapse');">
+                          <span class="wizard-pf-substep-number">1B.</span>
+                          <span class="wizard-pf-substep-title">Settings</span>
+                        </a>
+                        <div id="reviewStep1Substep2" class="wizard-pf-review-content">
+                          <form class="form">
+                            <div class="wizard-pf-review-item">
+                              <div class="wizard-pf-review-item-field">Setting A</div>
+                              <div class="wizard-pf-review-item-field">Setting B</div>
+                            </div>
+                          </form>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+                <li class="list-group-item">
+                  <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2').toggleClass('collapse');">Second Step</a>
+                  <div id="reviewStep2" class="wizard-pf-review-substeps">
+                    <ul class="list-group">
+                      <li class="list-group-item">
+                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep1').toggleClass('collapse');">
+                          <span class="wizard-pf-substep-number">2A.</span>
+                          <span class="wizard-pf-substep-title">Details</span>
+                        </a>
+                        <div id="reviewStep2Substep1" class="wizard-pf-review-content">
+                          <form class="form">
+                            <div class="wizard-pf-review-item">
+                              <span class="wizard-pf-review-item-label">Name:</span>
+                              <span class="wizard-pf-review-item-value">First Last</span>
+                            </div>
+                            <div class="wizard-pf-review-item">
+                              <span class="wizard-pf-review-item-label">Description:</span>
+                              <span class="wizard-pf-review-item-value">This is the description</span>
+                            </div>
+                          </form>
+                        </div>
+                      </li>
+                      <li class="list-group-item">
+                        <a onclick="$(this).toggleClass('collapsed'); $('#reviewStep2Substep2').toggleClass('collapse');">
+                          <span class="wizard-pf-substep-number">2B.</span>
+                          <span class="wizard-pf-substep-title">Settings</span>
+                        </a>
+                        <div id="reviewStep2Substep2" class="wizard-pf-review-content">
+                          <form class="form">
+                            <div class="wizard-pf-review-item">
+                              <div class="wizard-pf-review-item-field">Setting A</div>
+                              <div class="wizard-pf-review-item-field">Setting B</div>
+                            </div>
+                          </form>
+                        </div>
+                      </li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
             </div>
           </div><!-- /.wizard-pf-main -->
 
@@ -345,7 +385,7 @@
               <li class="list-group-item">
                 <a>
                   <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
+                  <span class="wizard-pf-substep-title">Summary</span>
                 </a>
               </li>
               <li class="list-group-item active">
@@ -421,7 +461,7 @@
               <li class="list-group-item">
                 <a>
                   <span class="wizard-pf-substep-number">3A.</span>
-                  <span class="wizard-pf-substep-title">Details</span>
+                  <span class="wizard-pf-substep-title">Summary</span>
                 </a>
               </li>
               <li class="list-group-item active">

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: patternfly-sass
 version: !ruby/object:Gem::Version
-  version: 3.7.0
+  version: 3.8.0
 platform: ruby
 authors:
 - Dávid Halász
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-21 00:00:00.000000000 Z
+date: 2016-08-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -31,28 +31,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.3.6
+        version: 3.3.7
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.3.6
+        version: 3.3.7
 - !ruby/object:Gem::Dependency
   name: font-awesome-sass
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.5.0
+        version: 4.6.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.5.0
+        version: 4.6.2
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -399,17 +399,15 @@ files:
 - spec/html/index.html
 - spec/html/infotip.html
 - spec/html/labels.html
-- spec/html/layout-alt-fixed-inner-scroll.html
-- spec/html/layout-alt-fixed-with-footer-inner-scroll.html
-- spec/html/layout-alt-fixed-with-footer.html
-- spec/html/layout-alt-fixed.html
 - spec/html/line-charts.html
 - spec/html/list-group.html
+- spec/html/list-view-rows.html
 - spec/html/list-view.html
 - spec/html/login.html
 - spec/html/modals.html
 - spec/html/navbar.html
-- spec/html/notifications-drawer.html
+- spec/html/notification-drawer-horizontal-nav.html
+- spec/html/notification-drawer-vertical-nav.html
 - spec/html/pagination.html
 - spec/html/panels.html
 - spec/html/pie-charts.html
@@ -429,8 +427,10 @@ files:
 - spec/html/typography-2.html
 - spec/html/typography.html
 - spec/html/utilization-bar-charts.html
-- spec/html/vertical-navigation-without-icons.html
-- spec/html/vertical-navigation.html
+- spec/html/vertical-navigation-primary-only.html
+- spec/html/vertical-navigation-with-secondary.html
+- spec/html/vertical-navigation-with-tertiary-no-icons.html
+- spec/html/vertical-navigation-with-tertiary-pins.html
 - spec/html/wizard.html
 - spec/main.html
 - spec/spec_helper.rb
@@ -455,7 +455,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.4
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: Red Hat's Patternfly, converted to Sass and ready to drop into Rails
@@ -502,17 +502,15 @@ test_files:
 - spec/html/index.html
 - spec/html/infotip.html
 - spec/html/labels.html
-- spec/html/layout-alt-fixed-inner-scroll.html
-- spec/html/layout-alt-fixed-with-footer-inner-scroll.html
-- spec/html/layout-alt-fixed-with-footer.html
-- spec/html/layout-alt-fixed.html
 - spec/html/line-charts.html
 - spec/html/list-group.html
+- spec/html/list-view-rows.html
 - spec/html/list-view.html
 - spec/html/login.html
 - spec/html/modals.html
 - spec/html/navbar.html
-- spec/html/notifications-drawer.html
+- spec/html/notification-drawer-horizontal-nav.html
+- spec/html/notification-drawer-vertical-nav.html
 - spec/html/pagination.html
 - spec/html/panels.html
 - spec/html/pie-charts.html
@@ -532,8 +530,10 @@ test_files:
 - spec/html/typography-2.html
 - spec/html/typography.html
 - spec/html/utilization-bar-charts.html
-- spec/html/vertical-navigation-without-icons.html
-- spec/html/vertical-navigation.html
+- spec/html/vertical-navigation-primary-only.html
+- spec/html/vertical-navigation-with-secondary.html
+- spec/html/vertical-navigation-with-tertiary-no-icons.html
+- spec/html/vertical-navigation-with-tertiary-pins.html
 - spec/html/wizard.html
 - spec/main.html
 - spec/spec_helper.rb

data/spec/html/layout-alt-fixed-with-footer-inner-scroll.html

@@ -1,917 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 9]><html lang="en-us" class="ie9 layout-pf-alt layout-pf-alt-fixed layout-pf-alt-fixed-with-footer layout-pf-alt-fixed-inner-scroll"><![endif]-->
-<!--[if gt IE 9]><!-->
-<html lang="en-us" class="layout-pf-alt layout-pf-alt-fixed layout-pf-alt-fixed-with-footer layout-pf-alt-fixed-inner-scroll">
-  <!--<![endif]-->
-    <head>
-    <title>Fixed Navbar Alt With Fixed Left Nav Alt And Fixed Footer Alt, Inner Scroll - 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>
-    The alternate layouts are not officially supported by Patternfly.  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-alt">
-  <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="dropdown">
-        <a class="dropdown-toggle nav-item-iconic" id="notifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-          <span title="Notifications" class="fa pficon-flag"></span>
-          <span class="badge">2</span>
-        </a>
-        <div class="dropdown-menu infotip bottom-right">
-          <div class="arrow"></div>
-          <ul class="list-group">
-            <li class="list-group-item">
-              <span class="i pficon pficon-info"></span> Modified Datasources ExampleDS
-            </li>
-            <li class="list-group-item">
-              <span class="i pficon pficon-info"></span> Error: System Failure
-            </li>
-          </ul>
-          <div class="footer">
-            <a>Clear Messages</a>
-          </div>
-        </div>
-      </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>
-  </nav>
-
-</nav> <!--/.navbar-->
-
-<nav class="nav-pf-vertical-alt">
-  <ul class="list-group">
-    <li class="list-group-item active">
-      <a href="#">
-        <span class="fa fa-dashboard" title="Dashboard" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">Dashboard</span>
-      </a>
-    </li>
-    <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-file-o" title="My Services" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Services</span>
-        <span class="badge">12</span>
-      </a>
-    </li>
-    <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-file-text-o" title="My Requests" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Requests</span>
-        <span class="badge">2</span>
-      </a>
-    </li>
-    <li class="list-group-item">
-      <a href="#">
-        <span class="fa fa-copy" title="My Items" data-toggle="tooltip" data-placement="right"></span>
-        <span class="list-group-item-value">My Items</span>
-      </a>
-    </li>
-    <li class="list-group-item list-group-item-separator hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-external-link" title="Launch"></span>
-        <span class="list-group-item-value">Launch</span>
-      </a>
-    </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-flag" title="Notifications"></span>
-        <span class="list-group-item-value">Notifications</span>
-        <span class="badge notifications">2</span>
-      </a>
-    </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-help" title="Help"></span>
-        <span class="list-group-item-value">Help</span>
-      </a>
-    </li>
-     <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-info-circle" title="About"></span>
-        <span class="list-group-item-value">About</span>
-      </a>
-    </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="pficon pficon-user" title="Preferences"></span>
-        <span class="list-group-item-value">Preferences</span>
-      </a>
-    </li>
-    <li class="list-group-item hidden-sm hidden-md hidden-lg">
-      <a href="#">
-        <span class="fa fa-sign-out" title="Log Out"></span>
-        <span class="list-group-item-value">Log Out</span>
-      </a>
-    </li>
-  </ul>
-</nav>
-<div class="container-fluid container-cards-pf container-pf-alt-nav-pf-vertical-alt">
-      <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-4 col-md-2">
-<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-6 col-sm-4 col-md-2">
-<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-6 col-sm-4 col-md-2">
-<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-6 col-sm-4 col-md-2">
-          <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 class="col-xs-6 col-sm-4 col-md-2">
-          <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">6</span> Dolar Sit</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 class="col-xs-6 col-sm-4 col-md-2">
-          <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">199</span> Consectetur</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-4 col-md-3 col-lg-2">
-<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-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-  <h2 class="card-pf-title">
-    <a href="#">
-      <span class="fa fa-paper-plane"></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>
-    </p>
-  </div>
-</div>
-
-        </div>
-        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-<div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-  <h2 class="card-pf-title">
-    <a href="#">
-      <span class="pficon pficon-cluster"></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-4 col-md-3 col-lg-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-            <h2 class="card-pf-title">
-              <a href="#">
-                <span class="pficon pficon-image"></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 class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-            <h2 class="card-pf-title">
-              <a href="#">
-                <span class="fa fa-shield"></span>
-                <span class="card-pf-aggregate-status-count">6</span> Dolar Sit
-              </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 class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-          <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini">
-            <h2 class="card-pf-title">
-              <a href="#">
-                <span class="fa fa-rocket"></span>
-                <span class="card-pf-aggregate-status-count">199</span> Consectetur
-              </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>23</span></a>
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="row row-cards-pf">
-        <div class="col-xs-12 col-sm-6 col-md-4">
-<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 col-md-4">
-<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 class="col-xs-12 col-sm-6 col-md-4">
-          <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">
-                <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 class="sr-only">25% Used</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">
-                <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 class="sr-only">50% 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="8 GB Available">
-                    <span class="sr-only">50% Available</span>
-                  </div>
-                </div>
-              </div>
-              <div class="progress-container progress-description-left">
-                <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 class="sr-only">62.5% Used</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">
-                <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 class="sr-only">100% Used</span>
-                  </div>
-                </div>
-              </div>
-            </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-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("Gbps 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">
-        <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 disabled">
-                  <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>
-<footer class="container-fluid footer-pf-alt">
-  <p>&copy; 2015 Company Name</p>
-</footer>
-
-<script>
-  $(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();
-  });
-</script>
-
-  </body>
-</html>