Text only

Single line text

<div class="media media-single">
  <p>Single line text</p>
</div>
Title only
Single line title
<div class="media media-single">
  <h5>Single line title</h5>
</div>
With icon
You'll love Theadmin
<div class="media media-single">
  <span class="ti-heart"></span>
  <span class="title">You'll love Theadmin</span>
</div>
With icon - right
You'll love Theadmin
<div class="media media-single">
  <span class="title">You'll love Theadmin</span>
  <span class="ti-heart"></span>
</div>
Action icon
Item to delete
<div class="media media-single">
  <span class="title">Item to delete</span>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Visible action icon
Item to delete
<div class="media media-single media-action-visible">
  <span class="title">Item to delete</span>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Multiple actions
Editable product
<div class="media media-single">
  <span class="title">Editable product</span>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Dot tag
Inbox
<div class="media media-single">
  <span class="badge badge-dot badge-danger"></span>
  <span class="title">Inbox</span>
</div>
Ring tag
Inbox
<div class="media media-single">
  <span class="badge badge-ring badge-success"></span>
  <span class="title">Inbox</span>
</div>
Number tag
Inbox 6
<div class="media media-single">
  <span class="title">Inbox</span>
  <span class="badge badge-pill badge-info">6</span>
</div>
Avatar
... Maryam Amiri
<div class="media media-single">
  <img class="avatar" src="../assets/img/avatar/1.jpg" alt="...">
  <span class="title">Maryam Amiri</span>
</div>
Avatar and actions
<div class="media media-single">
  <img class="avatar" src="../assets/img/avatar/1.jpg" alt="...">
  <a class="title hover-primary" href="#"><strong>Maryam Amiri</strong></a>
  <a class="media-action hover-primary" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a>
  <a class="media-action hover-danger" href="#" data-provide="tooltip" title="Delete"><i class="ti-close"></i></a>
</div>
Iconic avatar
New user registered
<div class="media media-single">
  <span class="avatar avatar-sm bg-success"><i class="ti-user"></i></span>
  <span class="title">
    New user registered
    <time class="sidetitle" datetime="2017-07-14 20:00">24 mins ago</time>
  </span>
</div>
Separated time
New user registered
<div class="media media-single">
  <span class="avatar avatar-sm bg-success"><i class="ti-user"></i></span>
  <span class="title">New user registered</span>
  <time datetime="2017-07-14 20:00">24 mins ago</time>
</div>
Checkbox
<div class="media media-single">
  <label class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description strike-on-check">A strick on checkbox description</span>
  </label>
</div>
Checkbox - right
Checkbox on the right side
<div class="media media-single">
  <span class="title">Checkbox on the right side</span>
  <label class="custom-control custom-control-lg custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
  </label>
</div>
Selectable item
... Maryam Amiri
<div class="media media-single" data-provide="selectable">
  <img class="avatar" src="../assets/img/avatar/1.jpg" alt="...">
  <span class="title">Maryam Amiri</span>
  <label class="custom-control no-border custom-control-lg custom-checkbox">
    <input type="checkbox" class="custom-control-input">
    <span class="custom-control-indicator"></span>
  </label>
</div>
Switch

Enable notifications

<div class="media media-single">
  <p class="title">Enable notifications</p>
  <label class="switch">
    <input type="checkbox" checked>
    <span class="switch-indicator"></span>
  </label>
</div>
Dropdown
<div class="media media-single">
  <p class="title">Hossein Shams</p>
  <div class="dropdown">
    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ti-more-alt rotate-90"></i></span>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="#"><i class="ti-user"></i> Profile</a>
      <a class="dropdown-item" href="#"><i class="ti-settings"></i> Settings</a>
      <a class="dropdown-item" href="#"><i class="ti-help"></i> Help</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#"><i class="ti-power-off"></i> Logout</a>
    </div>
  </div>
</div>