patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
203 lines (197 loc) • 7.81 kB
HTML
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>Card View - Card Variations - PatternFly</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../css/patternfly.min.css" >
<link rel="stylesheet" href="../css/patternfly-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Card View - Card Variations</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
<h2>Large Card</h2>
<div class="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 ">
<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>
<h2>Small Card</h2>
<div class="cards-pf">
<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 ">
<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><!-- /row -->
</div>
<h2>Mini Card with status</h2>
<div class="cards-pf">
<div class="row row-cards-pf">
<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>
</div><!-- /row -->
</div>
<h2>Mini Card with text</h2>
<div class="cards-pf">
<div class="row row-cards-pf">
<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>
</div>
</div>
<script>
$(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'); }
});
// 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'); }
});
});
</script>
</div><!-- /container -->
</body>
</html>