tabler-ui/src/_includes/cards/server.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-header">
		<div class="card-title">
			Server params
		</div>
		<div class="card-options">
			<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
				<i class="mdi mdi-lead-pencil"></i>
			</button>
			<div class="dropdown card-options-dropdown">
				<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="mdi mdi-dots-horizontal"></i></button>
				<div class="dropdown-menu dropdown-menu-right">
					<a class="dropdown-item" href="javascript:void(0)">
						<i class="si si-bell mr-3"></i>News
					</a>
					<a class="dropdown-item" href="javascript:void(0)">
						<i class="si si-envelope mr-3"></i>Messages
					</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="javascript:void(0)">
						<i class="si si-pencil mr-3"></i>Edit Profile
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="card-body">
		<div class="card-text">
			<div class="mt-0">
				<small class="float-right text-muted">10/200 GB</small>
				<h5>Memory</h5>
				<div class="progress progress-sm">
					<div style="width: 60%;" class="progress-bar"></div>
				</div>
			</div>

			<div class="mt-5">
				<small class="float-right text-muted">20 GB</small>
				<h5>Bandwidth</h5>
				<div class="progress progress-sm">
					<div style="width: 50%;" class="progress-bar"></div>
				</div>
			</div>

			<div class="mt-5">
				<small class="float-right text-muted">73%</small>
				<h5>Activity</h5>
				<div class="progress progress-sm">
					<div style="width: 40%;" class="progress-bar"></div>
				</div>
			</div>

			<div class="mt-5">
				<small class="float-right text-muted">400 GB</small>
				<h5>FTP</h5>
				<div class="progress progress-sm">
					<div style="width: 80%;" class="progress-bar bg-danger"></div>
				</div>
			</div>
		</div>
	</div>
</div>