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
<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
<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
<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
Inbox6
<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
Hossein Shams
<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>