istrap
Version:
iOS design system blends in with Bootstrap
1,072 lines (1,066 loc) • 67.4 kB
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="YooKits" />
<!-- Page Title -->
<title>Components - Media Object</title>
<!-- Favicon Icon -->
<link rel="icon" href="../assets/img/favicon.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/istrap.css" />
</head>
<body>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="../index.html" class="yoo-logo-link yoo-light-logo"><img src="../assets/img/logo.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="../index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<ion-icon name="ellipsis-vertical"></ion-icon>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li class="yoo-has-children">
<a href="#"><ion-icon name="albums"></ion-icon> Icons</a>
<ul class="yoo-dropdown yoo-style7">
<li>
<a href="material-icons.html">
<div class="yoo-desc-box yoo-icon-color1">
<ion-icon name="beer"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Airplane</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="font-awesome-icons.html">
<div class="yoo-desc-box yoo-icon-color2">
<ion-icon name="restaurant"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Local Dining</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="themify-icons.html">
<div class="yoo-desc-box yoo-icon-color3">
<ion-icon name="bonfire"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Fast Food</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
<li>
<a href="line-icons.html">
<div class="yoo-desc-box yoo-icon-color4">
<ion-icon name="pizza"></ion-icon>
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Local Pizza</div>
<span class="yoo-desc-cat">Second Line</span>
</div>
</a>
</li>
</ul>
</li>
<li class="yoo-has-children">
<a href="#"><ion-icon name="folder-open"></ion-icon> Images</a>
<ul class="yoo-dropdown yoo-style6">
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img01.png" alt="img01" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Star Wars</div>
<span class="yoo-desc-cat">Action</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img02.png" alt="img02" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Friends</div>
<span class="yoo-desc-cat">American Sitcom</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img03.png" alt="img03" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">Inception</div>
<span class="yoo-desc-cat">Thriller</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-desc-box">
<img src="../assets/img/img04.png" alt="img04" />
</div>
<div class="yoo-desc-meta">
<div class="yoo-desc-title">FightClub</div>
<span class="yoo-desc-cat">Drama/Action</span>
</div>
</a>
</li>
</ul>
</li>
<li class="yoo-has-children yoo-megamenu yoo-style1">
<a href="#"><ion-icon name="layers"></ion-icon> Components</a>
<div class="yoo-megamenu-in">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 1</h2>
<ul class="yoo-megamenu-list">
<li><a href="alerts.html">Alerts</a></li>
<li><a href="badge.html">Badge</a></li>
<li><a href="breadcrumb.html">Breadcrumb</a></li>
<li><a href="button.html">Buttons</a></li>
<li><a href="button-group.html">Button group</a></li>
<li><a href="card.html">Card</a></li>
<li><a href="carousel.html">Carousel</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 2</h2>
<ul class="yoo-megamenu-list">
<li><a href="collapse.html">Collapse</a></li>
<li><a href="dropdowns.html">Dropdowns</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="forms-group.html">Input group</a></li>
<li><a href="jumbotron.html">Jumbotron</a></li>
<li><a href="list-group.html">List group</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 3</h2>
<ul class="yoo-megamenu-list">
<li><a href="media-object.html">Media Object</a></li>
<li><a href="modal.html">Modal</a></li>
<li><a href="navs.html">Navs</a></li>
<li><a href="navbar.html">Navbar</a></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="popovers.html">Popovers</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="yoo-megamenu-col">
<h2 class="yoo-megamenu-title">Column 4</h2>
<ul class="yoo-megamenu-list">
<li><a href="progress.html">Progress</a></li>
<li><a href="scrollspy.html">Scrollspy</a></li>
<li><a href="spinners.html">Spinners</a></li>
<li><a href="table.html">Table</a></li>
<li><a href="toasts.html">Toasts</a></li>
<li><a href="tooltips.html">Tooltips</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-toggle-body yoo-search-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-search-btn">
<ion-icon name="search"></ion-icon>
</span>
<div class="yoo-dropdown yoo-search-dropdown">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search..." class="yoo-search-input">
<div class="yoo-toggle-cross">
<ion-icon name="close"></ion-icon>
</div>
<button class="yoo-search-submit"><ion-icon name="search"></ion-icon></button>
</form>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<ion-icon name="mail"></ion-icon>
<span class="yoo-ex-nav-label">9</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/1.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">10:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/2.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/3.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 05</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/4.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 10</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="../assets/img/user/5.jpg" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Thank you for purchasing! <br>
When you arrive prepared to negotiate
</div>
<span class="yoo-notify-time">Jan 16</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<ion-icon name="notifications"></ion-icon>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Notification</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<ion-icon name="people"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color4">
<ion-icon name="calendar"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color3">
<ion-icon name="heart"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<ion-icon name="chatbox"></ion-icon>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color1">
<img src="../assets/img/user/1.jpg" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-app-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-app-btn">
<ion-icon name="apps"></ion-icon>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Quick Navigation</h2>
<ul class="yoo-nofify-list yoo-style2 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/gmail.png" alt="gmail">
</div>
<div class="yoo-nofify-text">
<h3>Gmail</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/hangout.png" alt="hangout">
</div>
<div class="yoo-nofify-text">
<h3>Hangout</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/google.png" alt="google">
</div>
<div class="yoo-nofify-text">
<h3>Google+</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/mail.png" alt="mail">
</div>
<div class="yoo-nofify-text">
<h3>Mail</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/message.png" alt="message">
</div>
<div class="yoo-nofify-text">
<h3>Message</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nav-icon">
<img src="../assets/img/nav-icon/more.png" alt="more">
</div>
<div class="yoo-nofify-text">
<h3>More</h3>
</div>
</a>
</li>
</ul>
<hr>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <ion-icon name="chevron-forward"></ion-icon></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="../assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><ion-icon name="person-circle"></ion-icon>My Profile</a>
</li>
<li>
<a href="#"><ion-icon name="cog"></ion-icon>Settings</a>
</li>
<li>
<a href="#"><ion-icon name="videocam"></ion-icon>Upload</a>
</li>
<li>
<a href="#"><ion-icon name="help-circle"></ion-icon>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/" class="yoo-add-thumb">
<img src="../assets/img/idashboard.jpg" alt="MaterialXPro">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/idashboard-pro-bootstrap-admin-template/" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg1"><ion-icon name="person-circle"></ion-icon></span>
<span class="yoo-sidebar-link-text">Getting started</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../getting-started/introduction.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Introduction</span>
</span>
</a>
</li>
<li>
<a href="../getting-started/download.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Download</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg2"><ion-icon name="browsers"></ion-icon></span>
<span class="yoo-sidebar-link-text">Layout</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../layout/overview.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overview</span>
</span>
</a>
</li>
<li>
<a href="../layout/grid.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Grid</span>
</span>
</a>
</li>
<li>
<a href="../layout/utilities-for-layout.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Utilities for layout</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg3"><ion-icon name="document"></ion-icon></span>
<span class="yoo-sidebar-link-text">Contents</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../content/typography.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li>
<a href="../content/code.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Code</span>
</span>
</a>
</li>
<li>
<a href="../content/images.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Images</span>
</span>
</a>
</li>
<li>
<a href="../content/tables.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Tables</span>
</span>
</a>
</li>
<li>
<a href="../content/figures.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Figures</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg5"><ion-icon name="folder-open"></ion-icon></span>
<span class="yoo-sidebar-link-text">Components</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="alerts.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Alerts</span>
</span>
</a>
</li>
<li>
<a href="badge.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="breadcrumb.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="button.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="button-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Button group</span>
</span>
</a>
</li>
<li>
<a href="card.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li>
<a href="carousel.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Carousel</span>
</span>
</a>
</li>
<li>
<a href="collapse.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Collapse</span>
</span>
</a>
</li>
<li>
<a href="dropdowns.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Dropdowns</span>
</span>
</a>
</li>
<li>
<a href="forms.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="forms-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Input group</span>
</span>
</a>
</li>
<li>
<a href="jumbotron.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Jumbotron</span>
</span>
</a>
</li>
<li>
<a href="list-group.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">List group</span>
</span>
</a>
</li>
<li class="active">
<a href="media-object.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Media Object</span>
</span>
</a>
</li>
<li>
<a href="modal.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Modal</span>
</span>
</a>
</li>
<li>
<a href="navs.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Navs</span>
</span>
</a>
</li>
<li>
<a href="navbar.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Navbar</span>
</span>
</a>
</li>
<li>
<a href="pagination.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="popovers.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Popovers</span>
</span>
</a>
</li>
<li>
<a href="progress.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Progress</span>
</span>
</a>
</li>
<li>
<a href="scrollspy.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Scrollspy</span>
</span>
</a>
</li>
<li>
<a href="spinners.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Spinners</span>
</span>
</a>
</li>
<li>
<a href="toasts.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Toasts</span>
</span>
</a>
</li>
<li>
<a href="tooltips.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Tooltips</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="#" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg4"><ion-icon name="folder-open"></ion-icon></span>
<span class="yoo-sidebar-link-text">Utilities</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../utilities/borders.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Borders</span>
</span>
</a>
</li>
<li>
<a href="../utilities/close-icon.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Close icon</span>
</span>
</a>
</li>
<li>
<a href="../utilities/colors.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Colors</span>
</span>
</a>
</li>
<li>
<a href="../utilities/display.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Display</span>
</span>
</a>
</li>
<li>
<a href="../utilities/embed.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Embed</span>
</span>
</a>
</li>
<li>
<a href="../utilities/flex.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Flex</span>
</span>
</a>
</li>
<li>
<a href="../utilities/overflow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Overflow</span>
</span>
</a>
</li>
<li>
<a href="../utilities/shadow.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Shadows</span>
</span>
</a>
</li>
<li>
<a href="../utilities/sizing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sizing</span>
</span>
</a>
</li>
<li>
<a href="../utilities/spacing.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Spacing</span>
</span>
</a>
</li>
<li>
<a href="../utilities/stretched-link.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Stretched link</span>
</span>
</a>
</li>
<li>
<a href="../utilities/text.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Text</span>
</span>
</a>
</li>
<li>
<a href="../utilities/vertical-align.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Vertical align</span>
</span>
</a>
</li>
</ul>
</li>
<li class="yoo-sidebar-has-children">
<a href="../analytics.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon yoo-accent-bg6"><ion-icon name="cloud"></ion-icon></span>
<span class="yoo-sidebar-link-text">Extend</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="../extend/approach.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Approach</span>
</span>
</a>
</li>
<li>
<a href="../extend/icons.html" >
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Icons Table</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
<div class="yoo-uikits-heading">
<h2 class="yoo-uikits-title">Media Object</h2>
</div>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">General Media</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#general-media"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="general-media">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">General Media</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-20">
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="media">
<img class="mr-3" src="../assets/img/media-object/1.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
</div>
</div>
</div><!-- .yoo-card -->
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Nesting</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#nesting"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="nesting">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Nesting</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"mr-3"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media mt-3"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"pr-3"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Generic placeholder image"</span><span class="nt">></span>
<span class="nt"></a></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">></span>
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"mt-0"</span><span class="nt">></span>Media heading<span class="nt"></h5></span>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-20">
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
<div class="media">
<img class="mr-3" src="../assets/img/media-object/2.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="pr-3" href="#">
<img src="../assets/img/media-object/3.jpg" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
</div>
</div>
</div><!-- .yoo-card -->
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Alignment</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Alignment"><ion-icon name="code-working"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="Alignment">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Alignment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">