Single Line Publisher

Basic

Markup

<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

Markup

<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

Markup

<div class="publisher">
  <img class="avatar" src="../assets/img/avatar/1.jpg" 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

Markup

<div class="publisher">
  <img class="avatar align-self-start" src="../assets/img/avatar/1.jpg" 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

Markup

<div class="publisher bg-transparent">
  <img class="avatar" src="../assets/img/avatar/1.jpg" 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

Markup

<div class="publisher bg-transparent b-1">
  <img class="avatar" src="../assets/img/avatar/1.jpg" 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>