_full-2.html

<div class="card">
	<div class="card-status bg-primary"></div>
	<div class="card-header">
		<ul class="nav nav-tabs card-header-tabs">
			<li class="nav-item">
				<a class="nav-link active" href="#">Active</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			</li>
			<li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			</li>
		</ul>
	</div>
	<div class="card-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, beatae, cumque dolor, eveniet in maiores nihil
		pariatur placeat quibusdam suscipit ullam ut. Aliquam eum eveniet praesentium quidem quod repellendus sit?
	</div>
	<div class="card-body d-flex align-items-center border-top">
		{% include ui/avatar.html person-id=17 class="mr-3 rounded" %}
		<div class="mr-3">
			<div>
				<strong>1,700</strong>
			</div>
			<div class="text-muted">Users</div>
		</div>
		<div class="ml-auto">
			<div class="sparkline" data-spark="20,40,30,40,60,80,100" data-spark-type="line" data-spark-color="yellow">
			</div>
		</div>
	</div>
	<div class="card-body text-center border-top p-0">
		<div class="d-flex">
			<div class="flex-fill py-3">
				<div>$6,000</div>
				<small class="text-muted">Target</small>
			</div>
			<div class="flex-fill py-3 border-left">
				<div>$2,500</div>
				<small class="text-muted">Last Month</small>
			</div>
			<div class="flex-fill py-3 border-left">
				<div>5,235</div>
				<small class="text-muted">Likes</small>
			</div>
		</div>
	</div>
	<table class="table card-table table-vcenter border-top">
		<tbody>
		<tr>
			<th>Network</th>
			<th colspan="2">Visitors</th>
		</tr>
		<tr>
			<td>Instagram</td>
			<td>3,550</td>
			<td class="w-50">
				<div class="progress progress-xs">
					<div class="progress-bar bg-primary" style="width: 76%"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>Twitter</td>
			<td>1,789</td>
			<td class="w-50">
				<div class="progress progress-xs">
					<div class="progress-bar bg-primary" style="width: 62%"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>Facebook</td>
			<td>1,245</td>
			<td class="w-50">
				<div class="progress progress-xs">
					<div class="progress-bar bg-primary" style="width: 46%"></div>
				</div>
			</td>
		</tr>
		<tr>
			<td>Pinterest</td>
			<td>95</td>
			<td class="w-50">
				<div class="progress progress-xs">
					<div class="progress-bar bg-primary" style="width: 6%"></div>
				</div>
			</td>
		</tr>
		</tbody>
	</table>
</div>