---
title: Chat
---

{{#extend "layout-default"}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/structure/chat.css">
  {{/content}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Chat</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item active">Structure</li>
        </ol>
        <div class="page-header-actions">
          <form>
            <div class="input-search input-search-dark">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="" placeholder="Search...">
            </div>
          </form>
        </div>
      </div>

      <div class="page-content">
        <!-- Panel Title -->
        <div class="panel">
          <div class="panel-body">
            <div class="chat-box">
              <div class="chats">
                <div class="chat">
                  <div class="chat-avatar">
                    <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                      <img src="{{global}}/portraits/4.jpg" alt="June Lane">
                    </a>
                  </div>
                  <div class="chat-body">
                    <div class="chat-content">
                      <p>
                        Hello. What can I do for you?
                      </p>
                      <time class="chat-time" datetime="2017-06-01T08:30">8:30 am</time>
                    </div>
                  </div>
                </div>
                <div class="chat chat-left">
                  <div class="chat-avatar">
                    <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                      <img src="{{global}}/portraits/5.jpg" alt="Edward Fletcher">
                    </a>
                  </div>
                  <div class="chat-body">
                    <div class="chat-content">
                      <p>
                        I'm just looking around.
                      </p>
                      <p>Will you tell me something about yourself? </p>
                      <time class="chat-time" datetime="2017-06-01T08:35">8:35 am</time>
                    </div>
                    <div class="chat-content">
                      <p>
                        Are you there? That time!
                      </p>
                      <time class="chat-time" datetime="2017-06-01T08:40">8:40 am</time>
                    </div>
                  </div>
                </div>
                <div class="chat">
                  <div class="chat-avatar">
                    <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                      <img src="{{global}}/portraits/4.jpg" alt="June Lane">
                    </a>
                  </div>
                  <div class="chat-body">
                    <div class="chat-content">
                      <p>
                        Where?
                      </p>
                      <time class="chat-time" datetime="2017-06-01T08:35">8:35 am</time>
                    </div>
                    <div class="chat-content">
                      <p>
                        OK, my name is Limingqiang. I like singing, playing basketballand so on.
                      </p>
                      <time class="chat-time" datetime="2017-06-01T08:42">8:42 am</time>
                    </div>
                  </div>
                </div>
                <div class="chat chat-left">
                  <div class="chat-avatar">
                    <a class="avatar" data-toggle="tooltip" href="#" data-placement="left" title="Edward Fletcher">
                      <img src="{{global}}/portraits/5.jpg" alt="Edward Fletcher">
                    </a>
                  </div>
                  <div class="chat-body">
                    <div class="chat-content">
                      <p>You wait for notice.</p>
                    </div>
                    <div class="chat-content">
                      <p>Consectetuorem ipsum dolor sit?</p>
                      <time class="chat-time" datetime="2017-06-01T08:50">8:50 am</time>
                    </div>
                    <div class="chat-content">
                      <p>OK?</p>
                      <time class="chat-time" datetime="2017-06-01T08:55">8:55 am</time>
                    </div>
                  </div>
                </div>
                <div class="chat">
                  <div class="chat-avatar">
                    <a class="avatar" data-toggle="tooltip" href="#" data-placement="right" title="June Lane">
                      <img src="{{global}}/portraits/4.jpg" alt="June Lane">
                    </a>
                  </div>
                  <div class="chat-body">
                    <div class="chat-content">
                      <p>OK!</p>
                      <time class="chat-time" datetime="2017-06-01T09:00">9:00 am</time>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel-footer pb-30">
            <form>
              <div class="input-group form-material">
                <span class="input-group-btn">
                  <a href="javascript: void(0)" class="btn btn-pure btn-default icon md-camera"></a>
                </span>
                <input class="form-control" type="text" placeholder="Type message here ...">
                <span class="input-group-btn">
                  <button type="button" class="btn btn-pure btn-default icon md-mail-send"></button>
                </span>
              </div>
            </form>
          </div>
        </div>
        <!-- End Panel Title -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}