Single line Publishers

Single line publishers are great for places that mostly requires a line of text, like quick reply, chat, etc.

Basic
<div class="publisher">
  <input class="publisher-input" type="text" placeholder="Write something">
  <button class="publisher-btn"><i class="fa fa-paper-plane"></i></button>
</div>
Actions
<div class="publisher">
  <input class="publisher-input" type="text" placeholder="Write something">
  <span class="publisher-btn file-group">
    <i class="fa fa-paperclip file-browser"></i>
    <input type="file">
  </span>
  <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
  <a class="publisher-btn" href="#"><i class="fa fa-paper-plane"></i></a>
</div>
Avatar
...
<div class="publisher">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <input class="publisher-input" type="text" placeholder="Write something">
  <span class="publisher-btn file-group">
    <i class="fa fa-paperclip file-browser"></i>
    <input type="file">
  </span>
  <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
  <a class="publisher-btn" href="#"><i class="fa fa-paper-plane"></i></a>
</div>
Expandable input
...
<div class="publisher">
  <img class="avatar align-self-start" src="../assets/images/avatar/avatar-1.png" alt="...">
  <textarea class="publisher-input auto-expand" rows="1" placeholder="Write something"></textarea>
  <div class="align-self-end gap-items">
    <span class="publisher-btn file-group">
      <i class="fa fa-paperclip file-browser"></i>
      <input type="file">
    </span>
    <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    <a class="publisher-btn" href="#"><i class="fa fa-paper-plane"></i></a>
  </div>
</div>
Transparent
...
<div class="publisher bg-transparent">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <input class="publisher-input" type="text" placeholder="Write something">
  <span class="publisher-btn file-group">
    <i class="fa fa-paperclip file-browser"></i>
    <input type="file">
  </span>
  <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
  <a class="publisher-btn" href="#"><i class="fa fa-paper-plane"></i></a>
</div>
Bordered
...
<div class="publisher bg-transparent b-1">
  <img class="avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  <input class="publisher-input" type="text" placeholder="Write something">
  <span class="publisher-btn file-group">
    <i class="fa fa-paperclip file-browser"></i>
    <input type="file">
  </span>
  <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
  <a class="publisher-btn" href="#"><i class="fa fa-paper-plane"></i></a>
</div>
Multi line Publishers

Multiline publishers are great for places that mostly requires multi line of text, like reply a comment.

Basic
<div class="publisher publisher-multi">
  <textarea class="publisher-input" rows="3" placeholder="Write something"></textarea>
  <div class="flexbox flex-row-reverse">
    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>
Actions
<div class="publisher publisher-multi">
  <textarea class="publisher-input" rows="3" placeholder="Write something"></textarea>
  <div class="flexbox">
    <div class="gap-items">
      <span class="publisher-btn file-group">
        <i class="fa fa-paperclip file-browser"></i>
        <input type="file">
      </span>
      <a class="publisher-btn" href="#"><i class="fa fa-map-marker"></i></a>
      <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    </div>

    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>
Avatar
...
<div class="publisher publisher-multi">
  <img class="publisher-avatar avatar avatar-sm" src="../assets/images/avatar/avatar-1.png" alt="...">
  <textarea class="publisher-input auto-expand" rows="2" placeholder="Write something"></textarea>
  <div class="flexbox">
    <div class="gap-items">
      <span class="publisher-btn file-group">
        <i class="fa fa-paperclip file-browser"></i>
        <input type="file">
      </span>
      <a class="publisher-btn" href="#"><i class="fa fa-map-marker"></i></a>
      <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    </div>

    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>
Avatar alt
...
<div class="publisher publisher-multi">
  <div class="flexbox">
    <textarea class="publisher-input auto-expand" rows="3" placeholder="Write something"></textarea>
    <img class="flex-top avatar" src="../assets/images/avatar/avatar-1.png" alt="...">
  </div>
  <div class="flexbox">
    <div class="gap-items">
      <span class="publisher-btn file-group">
        <i class="fa fa-paperclip file-browser"></i>
        <input type="file">
      </span>
      <a class="publisher-btn" href="#"><i class="fa fa-map-marker"></i></a>
      <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    </div>

    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>
Expandable input
<div class="publisher publisher-multi">
  <textarea class="publisher-input auto-expand" rows="2" placeholder="Write something"></textarea>
  <div class="flexbox">
    <div class="gap-items">
      <span class="publisher-btn file-group">
        <i class="fa fa-paperclip file-browser"></i>
        <input type="file">
      </span>
      <a class="publisher-btn" href="#"><i class="fa fa-map-marker"></i></a>
      <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    </div>

    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>
Transparent and bordered
<div class="publisher publisher-multi bg-transparent b-1">
  <textarea class="publisher-input auto-expand" rows="2" placeholder="Write something"></textarea>
  <div class="flexbox">
    <div class="gap-items">
      <span class="publisher-btn file-group">
        <i class="fa fa-paperclip file-browser"></i>
        <input type="file">
      </span>
      <a class="publisher-btn" href="#"><i class="fa fa-map-marker"></i></a>
      <a class="publisher-btn" href="#"><i class="fa fa-smile-o"></i></a>
    </div>

    <button class="btn btn-sm btn-bold btn-primary">Post</button>
  </div>
</div>