• Inbox page consists of several parts and elements wrapped inside a tab:
  • You can see the following files for more info:
    And the files inside:
  • New Mail button with .btn-new-mail class is (optionally) inside tab list:
  • Tab pane consists of navbar, message list and message footer:
  • For more info about navbar you can see the following file:
    Message navbar .message-navbar consists of .message-bar which contains title of the pane and toolbar buttons.
    There are also other areas such as "Search box", "Sort Messages", etc, which are inside .messagebar-item-left or .messagebar-item-right classes:
  • Search box is similar to breadcrumbs searchbox:

Message List

  • .message-list-container contains a list of messages wrapped inside .message-list:
    . . .
  • A message item in the list consists of different elements:
    1. A checkbox to select the message
    2. .message-star A star icon to mark messages as starred/unstarred
    3. .sender Which is the sender's name
    4. .time Which is the time the message was sent/received
    5. .attachment Which indicates there's an attachment
    6. .summary Which contains message summary wrapped inside a .text and an optional .mail-tag or .message-flags
    Alex Smith 1:33 pm Click to open this message
  • .message-footer consists of optional parts such as a pagination:
    2nd footer style has .message-footer-style2 class:
    See the following file for more info:

Message Content

  • Message details is inside .message-content and consists of .message-header, .message-body and .message-attachment:
  • .message-header consists of optional elements, for example .sender, .time and action buttons:
    Message title
      John's Avatar   John Doe   Today, 7:15 pm
  • Message body is inside .message-body element
  • Message attachment consists of optional .attachment-title, .attachment-list and .attachment-images
    image 4 ...
    Attachment list consists of .action-buttons and .attached-file which has attached-name:
  • Document1.pdf

Message Compose

  • Message compose area consists of a form with optional elements and a navbar with optional buttons.
  • See the following files for more info:


  • You can also make inbox message list more compact by adding .message-condensed class to .message-container
  • Remove .tab-size-bigger from ul.inbox-tabs for smaller tabs
  • If you don't want a tabbed inbox, like the image below, you should make the following changes:
    1. Add .inbox-menu according to following file:
    2. Remove .tabbable and .tab-pane etc:


  • Please note that inbox layout and scripts are for demo only and may not be suitable for your application.
    For example when clicking to open a message, the message content is already inside the page but there's some fake waiting to simulate remote content loading.