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
Multi Select Card View
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.
Small Card
If you have many cards and space is tighter, use the smaller card option.
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 text
Alternatively include a small amount of text based content within the card with links. Inline actions accessible from the actions menu.
Card View
Description
-
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.
- 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.
- 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.
-
Card Hover: A visual indication is shown when the user hovers over a card.
- 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
<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="/patternfly-org/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 class="dropdown">
<a href="#0" class="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="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#0" 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="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">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
<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="/patternfly-org/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 class="dropdown">
<a href="#0" class="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="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#0" 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="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">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
<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
<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
Storage_1
25% in use
<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>25%</strong> in use</p>
</div>
</div>
</div>
</div>
Mini Card with text
Zone_1
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque. More info
<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>