smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
76 lines (73 loc) • 3.08 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Material Bootstrap Cards | https://www.htmlelements.com</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../../styles/demos.css" />
<link rel="stylesheet" type="text/css" href="../../styles/common.css" />
<script type="text/javascript" src="../../scripts/common.js"></script>
<link rel="stylesheet" type="text/css" href="../source/styles/smart.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="../source/smart.element.js"></script>
<script type="text/javascript" src="../source/smart.bootstrap.js"></script>
<script src="index.js"></script>
</head>
<body class="smart material viewport">
<h2 id="buttons">Material Bootstrap Badges</h2><br />
<p>CSS for Cards</p>
<div class="group">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
<h2>Card Header and Footer</h2>
<div class="group">
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-secondary">Go there</a>
</div>
</div>
</div>
<h2>Text Alignment</h2>
<div class="group">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="group">
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="group">
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="button button-primary">Go somewhere</a>
</div>
</div>
</div>
</body>
</html>