Cards

Published at 2021-02-19 13:42:50 Updated on pzplUI 2.1

<div class="card" style="width: 18rem;">
	<img src="./myPhoto.png" class="img-fluid">
			
	<div class="card-body">
		<h5>Card title</h5>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.</p>
		<br><a href="#" class="btn btn-normal">Go somewhere</a>
	</div>
</div>

Card with header

<div class="card" style="width: 18rem;">
	<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>
		<br><a href="#" class="btn btn-normal">Go somewhere</a>
	</div>
</div>

Colors!

<div class="card text-white bg-normal m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Primary card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>
<div class="card text-white bg-success m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Success card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>
<div class="card text-white bg-error m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Danger card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>
<div class="card text-dark bg-danger m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Warning card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>
<div class="card text-white bg-info m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Info card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>
<div class="card text-white bg-dark m3" style="max-width: 18rem;">
	<div class="card-header">Header</div>
	<div class="card-body">
		<h5 class="card-title">Dark card title</h5>
		<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
	</div>
</div>

Horizontal Cards

<div class="card flexbox" style="width: 25rem;">
	<img class="column" src="myImg.png" alt="image">

	<div class="card-body column flex-50">
		<h5>Card title</h5>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga facere consectetur officiis possimus veritatis ratione.
		</p>
		<br><a href="#" class="btn btn-normal">Go somewhere</a>
	</div>
</div>