Base Card

Card

This section provides guidance on the base elements of a card. There a number of variations of the card.

Aggregate Status Card

Aggregate Status Card

View the Aggregate Status Card Pattern

Trend Card

Small Cards

Trend Card

Large Cards

Image of trend card

View the Trend Card Pattern

Utilization Bar Card

Top Left Description and Top Right Label

Image of utilization bar card

Left Description and Right Label

Image of utilization bar card

View the Utilization Bar Card Pattern

Utilization Trend Card

Image of utilization trend card Image of utilization trend card

View the Utilization Bar Card Pattern

Card

Style

Image of blank card

  1. Background and Borders: All cards in a dashboard or content view 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

Image of card title

  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)

Image of time frame filter placement options

There are two options for where 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)

Image of card actions panel

  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 (optional): Within an actions panel you should have an action represented as a flat button on the left.

Loading

Image of loading state

While the data for a card is loading, the card’s contents are replaced with a spinning loading icon and a message. The message is customizable, but defaults to “Loading”. While the card is in a loading state, any actions that could be taken on the card’s content are disabled. Cards should not change height when data appears and is rendered.

No Data Available

Image of no data available state

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.

PatternFly Core Example


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]

Add New Cluster

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>