Advanced Medias — TheAdmin

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">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" checked>
      <label class="custom-control-label"></label>
    </div>
  </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">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <label class="custom-control-label"></label>
    </div>
  </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

Maryam Amiri

Owner

<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

Maryam Amiri

@m.amiri

<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

24 min ago

<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="2018-07-14 20:00">24 min ago</time>
  </div>
</div>

Iconic avatar with action

Photos

Aug 17, 2017

<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="2018-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 24 min ago

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="2018-07-14 20:00">24 min ago</time></p>
    <p>Updated his profile picture</p>
  </div>
</div>

Multi line description

Maryam Amiri 24 min ago

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="2018-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 24 min ago

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="2018-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? 24 min ago

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="2018-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

Maryam Amiri 24 min ago

You need to update the changelog in documentation before we release the current version.

Approve Delete

<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="2018-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 24 min ago

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="2018-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 24 min ago

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="2018-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

Avatar.jpg

<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

colors.jpg

Size: 80kb Type: jpg

<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 mb Download

<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>