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
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="2018-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="2018-07-14 20:00">24 mins ago</time>
</div>Checkbox
<div class="media media-single">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<label class="custom-control-label strike-on-check">A strick on checkbox description</label>
</div>
</div>Checkbox - right
Checkbox on the right side
<div class="media media-single">
<span class="title">Checkbox on the right side</span>
<div class="custom-control custom-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input">
<label class="custom-control-label"></label>
</div>
</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>
<div class="custom-control no-border custom-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input">
<label class="custom-control-label"></label>
</div>
</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>