Card
This section provides guidance on the base elements of a card. There a number of variations of the card.
Aggregate Status Card
View the Aggregate Status Card Pattern
Trend Card
Small Cards
Large Cards
Utilization Bar Card
Top Left Description and Top Right Label
Left Description and Right Label
View the Utilization Bar Card Pattern
Utilization Trend Card
Card
Style
- Background and Borders: All cards in a dashboard or content view should have the same background and border treatment.
- Top Accent (optional): Add a top accent to a row of cards to give them visual hierarchy.
Titles
- 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.
- Subtitle (optional): Add a subtitle if the card contains the same visualization for different object types.
Time Frame Filter (optional)
There are two options for where the time frame filter may be placed:
- if there is a card title, the filter should be displayed on the right of the title panel.
- if there is an action panel, the filter can be displayed on the right of the action panel.
Actions Panel (optional)
- 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.
- Actions Icon (optional): Include dan associated icon with the action button if applicable.
- Flat Actions Button (optional): Within an actions panel you should have an action represented as a flat button on the left.
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]
<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]
<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>