---
title: Email inbox
page-header: Inbox
page-menu: extra.email-inbox
layout: default
permalink: email-inbox.html
page-libs: [ hugerte]
---

<div class="card">
	<div class="row g-0">
		<div class="col-xxl-3 email-border border-end">
			<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
				<div class="card-body h-100">
					<div>
						{% include "ui/button.html" icon="pencil" text="Compose" color="primary" class="d-none d-sm-block"
						modal-id="new-email" %}
					</div>

					<div class="mt-3 nav nav-vertical">
						<a href="#" class="nav-link text-danger fw-bold">
							{% include "ui/icon.html" icon="inbox" class="me-2" %}
							Inbox<span class="badge badge-danger ms-auto">{{ mails | size }}</span>
						</a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="star" class="me-2" %}Starred</a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="clock" class="me-2" %}Snoozed</a>
						<a href="#" class="nav-link ">{% include "ui/icon.html" icon="file" class="me-2" %}Draft<span class="badge badge-info ms-auto">32</span></a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="mail-up" class="me-2" %}Sent Mail</a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="trash" class="me-2" %}Trash</a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="tag" class="me-2" %}Important</a>
						<a href="#" class="nav-link">{% include "ui/icon.html" icon="alert-octagon" class="me-2" %}Spam</a>
					</div>

					<div class="mt-4">
						<h6 class="subheader">Labels</h6>
						<div class="mt-2 nav nav-vertical">
							<a href="#" class="nav-link">
								<div class="badge bg-info me-2"></div> Updates
							</a>
							<a href="#" class="nav-link">
								<div class="badge bg-warning me-2"></div> Friends
							</a>
							<a href="#" class="nav-link">
								<div class="badge bg-success me-2"></div> Family
							</a>
							<a href="#" class="nav-link">
								<div class="badge bg-primary me-2"></div> Social
							</a>
							<a href="#" class="nav-link">
								<div class="badge bg-danger me-2"></div> Important
							</a>
							<a href="#" class="nav-link">
								<div class="badge bg-purple me-2"></div> Promotions
							</a>
						</div>
					</div>

					<div class="mt-5">
						<h6 class="subheader">Storage</h6>
						{% include "ui/progress.html" value=46 max=100 class="my-2" %}

						<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
					</div>


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

		<div class="col-xxl-9">
			<div class="card-body">
				<div class="d-flex flex-wrap align-items-center gap-2">
					<div class="d-xxl-none d-inline-flex">
						<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas"
							data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
							{% include "ui/icon.html" icon="menu-2" %}
						</button>
					</div>

					<div class="btn-group">
						{% include "ui/button.html" icon="archive" icon-only=true %}
						{% include "ui/button.html" icon="alert-octagon" icon-only=true %}
						{% include "ui/button.html" icon="trash" icon-only=true %}
					</div>

					<div class="btn-group">
						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
							{% include "ui/icon.html" icon="folder" %}
						</button>
						<div class="dropdown-menu">
							<span class="dropdown-header">Move to</span>
							<a class="dropdown-item" href="#">Social</a>
							<a class="dropdown-item" href="#">Promotions</a>
							<a class="dropdown-item" href="#">Updates</a>
							<a class="dropdown-item" href="#">Forums</a>
						</div>
					</div>

					<div class="btn-group">
						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
							{% include "ui/icon.html" icon="tag" %}
						</button>
						<div class="dropdown-menu">
							<span class="dropdown-header">Label as:</span>
							<a class="dropdown-item" href="#">Updates</a>
							<a class="dropdown-item" href="#">Social</a>
							<a class="dropdown-item" href="#">Promotions</a>
							<a class="dropdown-item" href="#">Forums</a>
						</div>
					</div>

					<div class="btn-group">
						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
							{% include "ui/icon.html" icon="dots" %} More
						</button>
						<div class="dropdown-menu">
							<span class="dropdown-header">More Options :</span>
							<a class="dropdown-item" href="#">Mark as Unread</a>
							<a class="dropdown-item" href="#">Add to Tasks</a>
							<a class="dropdown-item" href="#">Add Star</a>
							<a class="dropdown-item" href="#">Mute</a>
						</div>
					</div>
				</div>

				<div class="mt-3">
					<ul class="email-list">
						{% if mails and mails.size > 0 %}
						{% for mail in mails %}
						<li>
							<div class="email-sender-info">
								<div class="checkbox-wrapper-mail">
									<div class="form-check">
										<input type="checkbox" class="form-check-input" id="mail-{{ mail.id }}">
										<label class="form-check-label" for="mail-{{ mail.id }}"></label>
									</div>
								</div>
								<span class="star-toggle">{% include "ui/icon.html" icon="star" %}</span>
								<a href="#" class="email-title">{{ mail.sender }}</a>
							</div>

							<div class="email-content">
								<a href="#" class="email-subject">{{ mail.subject }} &nbsp;–&nbsp;
									<span>{{ mail.preview }}</span>
								</a>
								<div class="email-date">{{ mail.date }}</div>
							</div>

							<div class="email-action-icons">
								<ul class="list-inline">
									<li class="list-inline-item">
										<a href="#">{% include "ui/icon.html" icon="archive" %}</a>
									</li>
									<li class="list-inline-item">
										<a href="#">{% include "ui/icon.html" icon="trash" %}</a>
									</li>
									<li class="list-inline-item">
										<a href="#">
											{% include "ui/icon.html" icon="mail-opened" class="email-action-icons-item" %}
										</a>
									</li>
									<li class="list-inline-item">
										<a href="#">{% include "ui/icon.html" icon="clock" %}</a>
									</li>
								</ul>
							</div>
						</li>
						{% endfor %}
						{% else %}
						<li class="text-muted">No emails</li>
						{% endif %}
					</ul>
				</div>

				<div class="row">
					<div class="col-7 mt-1">
						Showing 1 - {{ mails | size }} of {{ mails | size }}
					</div> <!-- end col-->
					<div class="col-5">
						<div class="btn-group float-end">
							<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-left"
								%}</button>
							<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-right"
								%}</button>
						</div>
					</div> <!-- end col-->
				</div> <!-- end row-->
			</div>
		</div>
	</div>
</div>

{% include "ui/modal.html" modal-id="new-email" %}