idashboard

<!DOCTYPE html> <html class="no-js" lang="en"> <head>  <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" />  <title>Components - Card</title>  <link rel="icon" href="../assets/img/favicon.png">  <link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="../assets/css/iDashboard.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>   </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><a href="#"><ion-icon name="albums"></ion-icon> Home</a></li> <li><a href="#"><ion-icon name="cloud"></ion-icon> Contact</a></li> </ul> </nav>  </div>  <ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0"> <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> <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-gray-box"> <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-green-box"> <ion-icon name="today"></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-light-blue-box"> <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-gray-box"> <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-blue-box"> <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-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="settings"></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> <div class="yoo-sidebarheader-toggle"> <div class="yoo-button-bar1"></div> <div class="yoo-button-bar2"></div> <div class="yoo-button-bar3"></div> </div> <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-search"> <form action="#" class="yoo-search yoo-style1 yoo-search-md"> <input type="text" placeholder="Search..." class="yoo-search-input"> <button class="yoo-search-submit"><ion-icon name="search"></ion-icon></button> <button class="yoo-voice-btn"><ion-icon name="mic"></ion-icon></button> </form> </div> <div class="yoo-sidebar-nav"> <ul class="yoo-sidebar-nav-list yoo-mp0"> <li> <a href="index.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="layers"></ion-icon></span> <span class="yoo-sidebar-link-text">Dashboard</span> </span> </a> </li> <li> <a href="settings.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="create"></ion-icon></span> <span class="yoo-sidebar-link-text">Profile Settings</span> </span> </a> </li> <li> <a href="calender.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="calendar"></ion-icon></span> <span class="yoo-sidebar-link-text">Calender</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="person-circle"></ion-icon></span> <span class="yoo-sidebar-link-text">Sign In/Sign Up</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <li> <a href="login.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Log In</span> </span> </a> </li> <li> <a href="signup.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Sign Up</span> </span> </a> </li> </ul> </li> <li> <a href="alerts.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="notifications"></ion-icon></span> <span class="yoo-sidebar-link-text">Notifications</span> </span> </a> </li> <li> <a href="buttons.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="albums"></ion-icon></span> <span class="yoo-sidebar-link-text">Buttons</span> </span> </a> </li> <li> <a href="tables.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="cube"></ion-icon></span> <span class="yoo-sidebar-link-text">Table</span> </span> </a> </li> <li> <a href="forms.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="duplicate"></ion-icon></span> <span class="yoo-sidebar-link-text">Forms</span> </span> </a> </li> <li> <a href="pagination.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="trail-sign"></ion-icon></span> <span class="yoo-sidebar-link-text">Pagination</span> </span> </a> </li> <li> <a href="typography.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="text"></ion-icon></span> <span class="yoo-sidebar-link-text">Typography</span> </span> </a> </li> <li class="yoo-sidebar-has-children"> <a href="#" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="cloud"></ion-icon></span> <span class="yoo-sidebar-link-text">Components</span> </span> </a> <ul class="yoo-sidebar-nav-dropdown"> <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 class="active"> <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="dropdowns.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Dropdowns</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> <a href="modal.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Modal</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="tooltips.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-text">Tooltips</span> </span> </a> </li> </ul> </li> <li> <a href="icons.html" target="_blank"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="archive"></ion-icon></span> <span class="yoo-sidebar-link-text">Icons</span> </span> </a> </li> <li> <a href="svgmaps.html"> <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="map"></ion-icon></span> <span class="yoo-sidebar-link-text">SVG Maps</span> </span> </a> </li> <li> <a href="documentation.html" > <span class="yoo-sidebar-link-title"> <span class="yoo-sidebar-link-icon yoo-style1"><ion-icon name="reader"></ion-icon></span> <span class="yoo-sidebar-link-text">Documentation</span> </span> </a> </li> </ul> </div> </div> </div> <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">Card</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 Card</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#general-card"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="general-card"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">General Card</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">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></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-b30 yoo-height-lg-b30"></div> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../assets/img/card/01.jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary" >Go somewhere</a> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Only Text</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#only-text"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="only-text"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">General Card</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">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> This is some text within a card body. <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-b30 yoo-height-lg-b30"></div> <div class="card"> <div class="card-body"> This is some text within a card body. </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Titles, text, and links</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#title-text-link"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="title-text-link"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">General Card</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">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span> <span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="nt">></span>Card subtitle<span class="nt"></h6></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Button<span class="nt"></a></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Button<span class="nt"></a></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-b30 yoo-height-lg-b30"></div> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">Card title</h5> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Button</a> <a href="#" class="card-link">Button</a> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Images Card</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#images"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="images"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Images Card</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">"card"</span> <span class="na">style=</span><span class="s">"width: 18rem;"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></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-b30 yoo-height-lg-b30"></div> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="../assets/img/card/02.jpg" alt="Card image cap"> <div class="card-body"> <p class="card-text" style="margin-top: -6px; margin-bottom: -6px;">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Header and footer</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Header-and-footer"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="Header-and-footer"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Header and footer</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">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> Featured <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></div> <hr> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> Quote <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span> <span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span> <span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span> <span class="nt"></blockquote></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre></div> <hr> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> Featured <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer text-muted"</span><span class="nt">></span> 2 days ago <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-b30 yoo-height-lg-b30"></div> <div class="card"> <div class="card-header"> Featured </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="card"> <div class="card-header"> Quote </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Consectetur adipiscing elit, Lorem ipsum dolor sit amet</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> <div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> 2 days ago </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Using grid markup</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#using-grid-markup"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="using-grid-markup"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Header and footer</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">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-6"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span> <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-b30 yoo-height-lg-b30"></div> <div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h5 class="card-title">Special title treatment</h5> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> </div> <div class="yoo-height-b30 yoo-height-lg-b30"></div> </div> </div> </div> <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">Using utilities</h2> </div> <div class="yoo-card-heading-right"> <button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#using-utilities"><ion-icon name="code"></ion-icon></button>  <div class="modal fade" id="using-utilities"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Using utilities</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">"card w-75"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Button<span class="nt"></a></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card w-50"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> <span class="nt"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h5></span> <span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span>