Dashboard Cards

This section provides guidance on the base elements of a card for a dashboard view.

Jump to Timeframe filter in header or Timeframe filter in footer

Timeframe filter in header

Card Title

[card contents]

Timeframe filter in footer

Card Title

[card contents]

Style

card1

  1. Background and Borders: All cards on a dashboard should have the same background and border treatment.
  2. Top Accent (optional): Add a top accent to a row of cards to give them visual hierarchy

Titles

Card_titleAndSubtitle

  1. Title (optional): If the content of the card is not obvious, add a title to clarify what information is being presented. The title is always followed by a horizontal separator.
  2. Subtitle (optional): Add a subtitle if the card contains the same visualization for different object types.

Time Frame Filter (optional)

card_timeframe

There are two options that the time frame filter may be placed:

  1. If there is a card title, the filter should be displayed on the right of the title panel.
  2. If there is an action panel, the filter can be displayed on the right of the action panel.

Actions Panel (optional)

card_actionspanel

  1. Actions Panel (optional): Include an actions panel, at the bottom of the card, if there is a primary action that you would like the user to quickly and easily be able to access from the card view.
  2. Actions Icon (optional): Include an associated icon with the action button if applicable.
  3. Flat Actions Button Within an actions panel, you should have an action, which is represented as a flat button on the left.

No Data Available

card_no_data

  1. No Data Available: If the data for a card does not exist or cannot be reached, the card will display an informational icon with the text, "No data available". Note: This display is not meant to indicate that data is loading, and should only be used when data is unreachable.

Jump to Timeframe filter in header or Timeframe filter in footer

Timeframe filter in header

Card Title

[card contents]

Reference Markup

          
          
<body class="cards-pf">
  ...
  <div class="container-fluid container-cards-pf">
    <div class="row row-cards-pf">
      <div class="col-xs-6 col-sm-4 col-md-4">
      <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 class="selected"><a href="#">Last 30 Days</a></li>
        <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><!-- /row -->
  </div><!-- /container -->
</body>
          
          

Timeframe filter in footer

Card Title

[card contents]

Reference Markup

          
<body class="cards-pf">
  ...
  <div class="container-fluid container-cards-pf">
    <div class="row row-cards-pf">
      <div class="col-xs-6 col-sm-4 col-md-4">
        <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 class="selected"><a href="#">Last 30 Days</a></li>
        <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><!-- /container -->
</body>