tabler-ui/src/email.html

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

---
title: Email
layout: default
---

<div class="container">
	<div class="row">
		<div class="col-md-3">
			<h3 class="page-title mb-5">Mail Service</h3>

			<div>
				<div class="list-group list-group-transparent mb-0">
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
						<span class="icon mr-3"><i class="fe fe-inbox"></i></span>Inbox <span class="ml-auto badge badge-primary">14</span>
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-send"></i></span>Sent Mail
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-alert-circle"></i></span>Important <span class="ml-auto badge badge-secondary">3</span>
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-star"></i></span>Starred
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-file"></i></span>Drafts
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags
					</a>
					<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
						<span class="icon mr-3"><i class="fe fe-trash-2"></i></span>Trash
					</a>
				</div>

				<div class="mt-6">
					<a href="#" class="btn btn-secondary btn-block">Compose new Email</a>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Compose new message</h3>
				</div>

				<div class="card-body">

					<form action="">
						<div class="form-group">
							<div class="row align-items-center">
								<label class="col-sm-2">To:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control">
								</div>
							</div>
						</div>

						<div class="form-group">
							<div class="row align-items-center">
								<label class="col-sm-2">Subject:</label>
								<div class="col-sm-10">
									<input type="text" class="form-control">
								</div>
							</div>
						</div>

						<textarea rows="10" class="form-control"></textarea>

						<div class="btn-list mt-4 text-right">
							<button type="button" class="btn btn-secondary btn-space">Cancel</button>
							<button type="submit" class="btn btn-primary btn-space">Send message</button>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>
</div>