mirror of
https://github.com/tabler/tabler.git
synced 2026-07-22 05:21:45 +04:00
chomik
94 lines
2.4 KiB
HTML
94 lines
2.4 KiB
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>
|