Text only
Hossein Shams
Front-end Developer
<div class="media"> <div class="media-body"> <p><strong>Hossein Shams</strong></p> <p>Front-end Developer</p> </div></div>With icon
(650) 555 - 1234
Mobile
<div class="media"> <span class="fa fa-phone lead text-info"></span> <div class="media-body"> <p><strong>(650) 555 - 1234</strong></p> <p>Mobile</p> </div></div>With icon - right
thethemes@gmail.com
Work
<div class="media"> <div class="media-body"> <p><strong>thethemes@gmail.com</strong></p> <p>Work</p> </div> <span class="fa fa-envelope lead text-info"></span></div>Vertically centered
(650) 555 - 1234
Mobile
<div class="media align-items-center"> <span class="fa fa-phone lead text-info"></span> <div class="media-body"> <p><strong>(650) 555 - 1234</strong></p> <p>Mobile</p> </div></div>Switch
Notifications
Turn on to receive alerts
<div class="media"> <div class="media-body"> <p><strong>Notifications</strong></p> <p>Turn on to receive alerts</p> </div> <label class="switch"> <input type="checkbox" checked> <span class="switch-indicator"></span> </label></div>Checkbox
Notifications
Turn on to receive alerts
<div class="media"> <div class="media-left"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" checked> <span class="custom-control-indicator"></span> </label> </div> <div class="media-body"> <p><strong>Notifications</strong></p> <p>Turn on to receive alerts</p> </div></div>Selectable
Notifications
Turn on to receive alerts
<div class="media" data-provide="selectable"> <div class="media-left"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> </label> </div> <div class="media-body"> <p><strong>Notifications</strong></p> <p>Turn on to receive alerts</p> </div></div>Avatar
Maryam Amiri
Administrator
<div class="media"> <img class="avatar" src="../assets/img/avatar/1.jpg" alt="..."> <div class="media-body"> <p><strong>Maryam Amiri</strong></p> <p>Administrator</p> </div></div>Avatar and actions
<div class="media align-items-center"> <img class="avatar" src="../assets/img/avatar/1.jpg" alt="..."> <div class="media-body"> <p><strong>Maryam Amiri</strong></p> <p>Owner</p> </div> <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>Avatar and button
<div class="media align-items-center"> <img class="avatar" src="../assets/img/avatar/1.jpg" alt="..."> <div class="media-body"> <p><strong>Maryam Amiri</strong></p> <p>@m.amiri</p> </div> <div> <a class="btn btn-sm btn-twitter btn-outline" href="#">Follow</a> </div></div>Iconic avatar
New user registered
<div class="media align-items-center"> <span class="avatar avatar-sm bg-primary"><i class="fa fa-user"></i></span> <div class="media-body"> <p>New user registered</p> <time datetime="2017-07-14 20:00">24 min ago</time> </div></div>Iconic avatar with action
<div class="media align-items-center"> <span class="avatar avatar-sm bg-primary"><i class="fa fa-folder"></i></span> <div class="media-body"> <p><strong>Photos</strong></p> <time datetime="2017-07-14 20:00">Aug 17, 2016</time> </div> <div> <a class="hover-info" href="#" data-provide="tooltip" title="More info"><i class="fa fa-info"></i></a> </div></div>With time
Maryam Amiri
Updated his profile picture
<div class="media"> <img class="avatar" src="../assets/img/avatar/1.jpg" alt="..."> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p>Updated his profile picture</p> </div></div>Multi line description
Maryam Amiri
You need to update the changelog in documentation before we release the current version.
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p>You need to update the changelog in documentation before we release the current version.</p> </div></div>Truncated description
Maryam Amiri
You need to update the changelog in documentation before we release the current version.
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p class="text-truncate">You need to update the changelog in documentation before we release the current version.</p> </div></div>Multi line with title
BBQ this weekend?
Maryam Amiri
I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p> <strong>BBQ this weekend?</strong> <time class="float-right" datetime="2017-07-14 20:00">24 min ago</time> </p> <p class="fs-14 semibold">Maryam Amiri</p> <p>I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?</p> </div></div>Multi line with title
BBQ this weekend?(4)
Maryam Amiri I'll be in your neightborhood doing errands this weekend. Do you want me bring anything?
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p> <strong>BBQ this weekend?</strong> <small class="pl-1"><strong>(4)</strong></small> </p> <p> <strong class="fs-14 semibold">Maryam Amiri</strong> <span class="dash"></span> I'll be in your neightborhood doing errands this weekend. Do you want me bring anything? </p> </div></div>Button actions
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p>You need to update the changelog in documentation before we release the current version.</p> <div class="btn-spacer mt-1"> <a class="btn btn-xs btn-w-xs btn-outline btn-success" href="#">Approve</a> <a class="btn btn-xs btn-w-xs btn-outline btn-danger" href="#">Delete</a> </div> </div></div>Link actions
Maryam Amiri
You need to update the changelog in documentation before we release the current version.
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p>You need to update the changelog in documentation before we release the current version.</p> <div class="media-block-actions"> <nav class="nav nav-dot-separated"> <a class="nav-link" href="#">Comments (2)</a> <a class="nav-link" href="#">likes (7)</a> </nav> <nav class="nav fs-16"> <a class="nav-link" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a> <a class="nav-link" href="#" data-provide="tooltip" title="Delete"><i class="ti-trash"></i></a> </nav> </div> </div></div>Link actions
Maryam Amiri
You need to update the changelog in documentation before we release the current version.
<div class="media"> <span class="avatar status-success"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="media-body"> <p><strong>Maryam Amiri</strong><time class="float-right" datetime="2017-07-14 20:00">24 min ago</time></p> <p>You need to update the changelog in documentation before we release the current version.</p> <div class="media-block-actions"> <nav class="nav nav-dot-separated"> <a class="nav-link" href="#">Comments (2)</a> <a class="nav-link" href="#">likes (7)</a> </nav> <nav class="nav fs-16 media-hover-show"> <a class="nav-link" href="#" data-provide="tooltip" title="Edit"><i class="ti-pencil"></i></a> <a class="nav-link" href="#" data-provide="tooltip" title="Delete"><i class="ti-trash"></i></a> </nav> </div> </div></div>Notification
Done!
You task has been completed.<div class="media flex-column text-center p-40"> <span class="avatar avatar-xxl bg-success opacity-60 mx-auto"> <i class="ti-check fs-35 align-sub"></i> </span> <h6 class="text-uppercase fw-500 mt-3">Done!</h6> <small>You task has been completed.</small></div>Image preview
<div class="media flex-column w-200px h-250px b-1 p-0"> <span class="m-auto p-2"> <img src="../assets/img/avatar/1.jpg" alt="..."> </span> <div class="flexbox bg-pale-secondary bt-1 border-light px-12 py-10 w-100"> <span class="flex-grow">Avatar.jpg</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></div>File preview
<div class="media align-items-center"> <span> <i class="ti-file fs-30 text-info"></i> </span> <div class="media-body"> <h5>colors.jpg</h5> <p class="gap-items"> <small>Size: 80kb</small> <small>Type: jpg</small> </p> </div> <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>File preview
TheAdmin-v1.zip
2 mbDownload<div class="media flex-column align-items-center text-center"> <i class="ti-zip text-secondary fs-45 mb-3"></i> <p class="fw-600">TheAdmin-v1.zip</p> <em class="text-fader mb-3">2 mb</em> <a class="btn btn-bold btn-block btn-cyan" href="#">Download</a></div>