---
title: Email
page-header: Crypto currencies
---

<div class="row">
   <div class="col-md-3">
      <h3 class="mb-4">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">{% include ui/icon.html icon="inbox" %}</span>Inbox <span class="ml-auto badge bg-blue">14</span>
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="send" %}</span>Sent Mail
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="alert-circle" %}</span>Important <span class="ml-auto badge bg-gray">3</span>
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="star" %}</span>Starred
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="file" %}</span>Drafts
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="tag" %}</span>Tags
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
               <span class="icon mr-3">{% include ui/icon.html icon="trash" %}</span>Trash
            </a>
         </div>

         <div class="mt-4">
            <a href="#" class="btn btn-white 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="mb-2">
                  <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="mb-2">
                  <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-white btn-space">Cancel</button>
                  <button type="submit" class="btn btn-primary btn-space">Send message</button>
               </div>
            </form>
         </div>
      </div>

   </div>
</div>
