Card View

Card View organizes content into a grid of cards. Card View is useful for displaying a small to moderate amount of content in a way that is not visually overwhelming. If the pieces of content to be displayed are best identified by a graphic or other visual representation, Card View enables a user to easily visualize and compare them. It is also useful when you want to present a large number of objects at once within the same summary page.

The Card View should NOT be used if:

  • Users need to quickly scan a large amount of text-based content. Consider using a Table View.
  • You want to display more content about each object that can fit into a small tile. Consider using a List View.

Jump to Single Select Card View, Multi Select Card View or Card Variations.

Single Select Card View

Single-select card view in context

View full page example

Multi Select Card View

Multi-select card view in context

View full page example

Card Variations

The following card variations provide some examples of how you might visualize content within a card. You are not limited to these layouts. You may need to adjust the visualizations and/or combine elements to best fit your application’s needs. Each card within a card view should have a consistent layout. Do not mix and match.

Large Card

When you have fewer cards and more space to work with, you may consider a larger card option that also shows some status and additional information.

Large card example

Small Card

If you have many cards and space is tighter, use the smaller card option.

Small card example

Mini Card with status

Use when you want to display many objects within a grid layout. Any inline actions should be hidden in an actions menu placed in the upper right corner of the card. Status can be reflected through a status icon preceding object name (title) and or a single chart graphic. The bar graph is used here because of its small vertical footprint.

Mini card with status example

Mini Card with text

Alternatively include a small amount of text based content within the card with links. Inline actions accessible from the actions menu.

Mini card with text example

Card View

Description

Card View

  1. Toolbar: The Toolbar pattern may include filter, sort, actions, find and change view type. If the user can add new objects that will appear in the view, and Add action should be included here.

  2. Card: The card is a container for displaying content about an object. At a minimum each card should be uniquely identified with the name of the object that it represents.
    • Each Card should have the same layout:
    • When including titles, Make the title bold rather than appending a colon ( : )
    • Links may be displayed within a card
    • When the viewport size is decreased:
    • The number of cards in each row may decrease
    • Use tooltips as necessary.
  3. Selection:
    • When only single-select is supported, a user can drill down on a card by clicking on it.
    • If multi-select is supported, a checkbox will be displayed when the user hovers over a card. When it is clicked, that card is selected which is indicated by the check mark in the checkbox as well as a blue outline on the card. The selected checkbox will be shown as long as the card remains selected. Actions in the Toolbar apply to all selected cards.
    • For multi-select on mobile devices, checkboxes should be displayed at all times, and should use the device default checkbox rather than the PatternFly checkbox.
  4. Card Hover: A visual indication is shown when the user hovers over a card.

  5. Inline Actions: Inline actions should be included if the user needs to be able to quickly perform an action on a single card. Very large numbers of actions should be placed in the Actions section of the Toolbar rather than on the card. See Card Variations for some ways that you may represent inline actions on cards.

Additional Notes about Behavior

  • Empty State: If no cards exist to be displayed, display an Empty State page. See the Empty State pattern for more details. If there are no items to display as the result of a null filter result, see the Filter pattern for more information about how to display this.

  • Vertical Scroll: Use a vertical scrollbar as needed. A horizontal scrollbar should NOT be used. Instead, the page containing the Card View should be responsive.

  • Pagination: Card view can also support pagination. See Pagination for more details.

Jump to Single-Select Card View, Multi-Select Card View, Large Card, Small Card, Mini Card with status, Mini Card with text

Single-Select Card View

View full page example

Reference Markup

<body class="cards-pf">
    <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="//assets/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">
        </ul>
      </div>
    </nav>

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <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>

              </div>
              <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                  <button class="btn btn-link btn-find" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                  <div class="find-pf-dropdown-container">
                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                    <div class="find-pf-buttons">
                      <span class="find-pf-nums">1 of 3</span>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-up"></span>
                      </button>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-down"></span>
                      </button>
                      <button class="btn btn-link btn-find-close" type="button">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->

<div class="container-fluid container-cards-pf">
  <div class="row row-cards-pf">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
  </div>
</div>
<script>
  $(function() {
    // matchHeight the contents of each .card-pf and then the .card-pf itself
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
  });
  $(document).ready(function() {
    // Card Single Select
    $('.card-pf-view-single-select').click(function() {
      if ($(this).hasClass('active'))
      { $(this).removeClass('active'); }
      else
      { $('.card-pf-view-single-select').removeClass('active'); $(this).addClass('active'); }
    });
  });
</script>
</body>

Multi-Select Card View

View full page example

Reference Markup

<body class="cards-pf">
    <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="//assets/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">
        </ul>
      </div>
    </nav>

      <div class="container-fluid">
        <div class="row toolbar-pf">
          <div class="col-sm-12">
            <form class="toolbar-pf-actions">
              <div class="form-group toolbar-pf-filter">
                <label class="sr-only" for="filter">Name</label>
                <div class="input-group">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li class="selected"><a href="#">Name</a></li>
                      <li><a href="#">Type</a></li>
                      <li><a href="#">Color</a></li>
                    </ul>
                  </div><!-- /btn-group -->
                  <input type="text" class="form-control" id="filter" placeholder="Filter By Name...">
                </div><!-- /input-group -->
              </div>
              <div class="form-group">
                <div class="dropdown btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li class="selected"><a href="#">Name</a></li>
                    <li><a href="#">Type</a></li>
                    <li><a href="#">Last Modified</a></li>
                  </ul>
                </div>
                <button class="btn btn-link" type="button">
                  <span class="fa fa-sort-alpha-asc"></span>
                </button>
              </div>
              <div class="form-group">
                <button class="btn btn-default" type="button">Action</button>
                <button class="btn btn-default" type="button">Action</button>
                <div class="dropdown btn-group  dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebab" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu " aria-labelledby="dropdownKebab">
    <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>

              </div>
              <div class="toolbar-pf-action-right">
                <div class="form-group toolbar-pf-find">
                  <button class="btn btn-link btn-find" type="button">
                    <span class="fa fa-search"></span>
                  </button>
                  <div class="find-pf-dropdown-container">
                    <input type="text" class="form-control" id="find" placeholder="Find By Keyword...">
                    <div class="find-pf-buttons">
                      <span class="find-pf-nums">1 of 3</span>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-up"></span>
                      </button>
                      <button class="btn btn-link" type="button">
                        <span class="fa fa-angle-down"></span>
                      </button>
                      <button class="btn btn-link btn-find-close" type="button">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group toolbar-pf-view-selector">
                  <button class="btn btn-link "><i class="fa fa-th"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-large"></i></button>
                  <button class="btn btn-link "><i class="fa fa-th-list"></i></button>
                </div>
              </div>
            </form>
            <div class="row toolbar-pf-results">
              <div class="col-sm-12">
                <h5>40 Results</h5>
                <p>Active filters:</p>
                <ul class="list-inline">
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                  <li>
                    <span class="label label-info">
                      Name: nameofthething
                      <a href="#"><span class="pficon pficon-close"></span></a>
                    </span>
                  </li>
                </ul>
                <p><a href="#">Clear All Filters</a></p>
              </div><!-- /col -->
            </div><!-- /row -->
          </div><!-- /col -->
        </div><!-- /row -->
      </div><!-- /container -->

<div class="container-fluid container-cards-pf" id="card-container">
  <div class="row row-cards-pf">
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view card-pf-view-select card-pf-view-multi-select">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
    </div>
  </div>
</div>
<script>
  $(function() {
    // matchHeight the contents of each .card-pf and then the .card-pf itself
    $(".row-cards-pf > [class*='col'] > .card-pf > .card-pf-body").matchHeight();
  });
  $(document).ready(function() {
    // Card Multi Select
    $('input[type=checkbox]').click(function() {
      if ($(this).parent().parent().hasClass('active'))
      { $(this).parent().parent().removeClass('active'); }
      else
      { $(this).parent().parent().addClass('active'); }
    });
    // allow users to select multiple cards with shift key
    $('#card-container').on('click', '.card-pf-view-checkbox>input', function(event) {
      var $cardsContainer = $('.container-cards-pf');
      var prevIndex = $cardsContainer.data('prevIndex');
      var $cards = $cardsContainer.find('.card-pf');
      var $currentCard = $(this).closest('.card-pf');
      if(event.shiftKey && prevIndex > -1 && this.checked) {
        var currentIndex = $cards.index($currentCard);
        var $selectScope = currentIndex - prevIndex > 0
          ? $currentCard.parent().prevAll().not($cards.eq(prevIndex).parent().prevAll().addBack())
          : $cards.eq(prevIndex).parent().prevAll().not($currentCard.parent().prevAll().addBack());
        $selectScope.children().addClass('active').find('.card-pf-view-checkbox').children('input').prop('checked', true);
      }
      $cardsContainer.data('prevIndex', this.checked ? $cards.index($currentCard) : -1);
    });
  });
</script>

</body>

Large Card

Cake Service

8

Created On 2015-03-01 02:00 AM
Never Expires

Reference Markup

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card-pf card-pf-view ">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
</div>

Small Card

Cake Service

8

Created On 2015-03-01 02:00 AM
Never Expires

Reference Markup

<div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
<div class="card-pf card-pf-view ">
  <div class="card-pf-body">
    <div class="card-pf-top-element">
      <span class="fa fa-birthday-cake card-pf-icon-circle"></span>
    </div>
    <h2 class="card-pf-title text-center">
      Cake Service
    </h2>
    <div class="card-pf-items text-center">
      <div class="card-pf-item">
        <span class="pficon pficon-screen"></span>
        <span class="card-pf-item-text">8</span>
      </div>
      <div class="card-pf-item">
        <span class="fa fa-check"></span>
      </div>
    </div>
    <p class="card-pf-info text-center"><strong>Created On</strong> 2015-03-01 02:00 AM <br/> Never Expires</p>
  </div>
  <div class="card-pf-view-checkbox">
    <input type="checkbox">
  </div>
</div>
</div>

Mini Card with status

25% Used
75% Available

10% in use

Reference Markup

<div class="col-xs-12 col-sm-3 col-md-2">
<div class="card-pf card-pf-view card-pf-view-xs">
  <div class="card-pf-body">
    <div class="card-pf-heading-kebab">
      <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight2" 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="dropupKebabRight2">
    <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>

      <h2 class="card-pf-title">
        <span class="pficon pficon-cluster"></span> Storage_1
      </h2>
    </div>
    <div class="progress-pf-legend">
      <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>
<script>
  // Initialize Tooltip
  jQuery(document).ready(function() {
    jQuery('[data-toggle="tooltip"]').tooltip();
  });
</script>

      <p><span class="pficon pficon-warning-triangle-o"></span> <strong>10%</strong> in use</p>
    </div>
  </div>
</div>
</div>

Mini Card with text

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. More info

Reference Markup

<div class="col-xs-12 col-sm-3 col-md-2">
<div class="card-pf card-pf-view card-pf-view-xs">
  <div class="card-pf-body">
    <div class="card-pf-heading-kebab">
      <div class="dropup pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropupKebabRight3" 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="dropupKebabRight3">
    <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>

      <h2 class="card-pf-title">
        <span class="pficon pficon-service"></span> Zone_1
      </h2>
    </div>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. <a href="#">More info</a></p>
  </div>
</div>
</div>