Empty States

Display placeholder image when empty.

Empty drawer

You can use a drawer with empty state.

Preview
HTML

Drawer

														
<a class="btn btn-primary drawer-toggle-link" data-target="#empty_drawer" data-drawer="overlay"  href="javascript:void(0);">Drawer</a>

<!-- Empty Drawer -->
	<div id="empty_drawer" class="hk-drawer drawer-right">
		<div class="drawer-header">
			<div class="drawer-text">Your Cart</div>
			<button type="button" class="drawer-close btn-close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="drawer-body">
			<div data-simplebar class="nicescroll-bar">
				<div class="drawer-content-wrap">
					<img src="dist/img/empty-cart.png" class="img-fluid" alt="cart"> 
					<p  class="text-dark">Your Cart looks a little empty. Checkout some <a href="#" class="text-dark"><u>unbeatable deals?</u></a></p>
				</div>
			</div>
		</div>
		<div class="drawer-footer">
			<p  class="p-xs">All illustration are powered by <a href="#"><u>OUCH</u></a></p>
		</div>
	</div>
<!-- /Empty Drawer -->

Empty card

You can use a bootstrap card with empty state.

Preview
HTML

You have nothing to display

With supporting text below as a natural lead-in to additional content.

Add event

														
<div class="card">
	<div class="card-body">
		<div class="w-250p mx-auto">
			<img class="img-fluid d-inline-block" src="dist/img/empty-2.png" alt="empty2"/>
		</div>
		<div class="text-center">
			<h4 class="h4">You have nothing to display</h4>
			<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
			<a href="#" class="btn btn-primary">Add event</a>
		</div>
	</div>
</div>

Empty drawer
Empty card