idashboard
Version:
Free admin template inspired by iOS design
929 lines (926 loc) • 55.5 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>Typography</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/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>
<!-- 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><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>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<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><!-- .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-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 class="active">
<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>
<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><!-- .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">Typography</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">Headings</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Headings"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="Headings">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Headings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1></span>h1. Bootstrap heading<span class="nt"></h1></span>
<span class="nt"><h2></span>h2. Bootstrap heading<span class="nt"></h2></span>
<span class="nt"><h3></span>h3. Bootstrap heading<span class="nt"></h3></span>
<span class="nt"><h4></span>h4. Bootstrap heading<span class="nt"></h4></span>
<span class="nt"><h5></span>h5. Bootstrap heading<span class="nt"></h5></span>
<span class="nt"><h6></span>h6. Bootstrap heading<span class="nt"></h6></span></code></pre></figure>
</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>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<div class="yoo-height-b5 yoo-height-lg-b5"></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">Display headings</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#DisplayHeadings"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="DisplayHeadings">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Display headings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-1"</span><span class="nt">></span>Display 1<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-2"</span><span class="nt">></span>Display 2<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-3"</span><span class="nt">></span>Display 3<span class="nt"></h1></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"display-4"</span><span class="nt">></span>Display 4<span class="nt"></h1></span></code></pre></figure>
</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>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<div class="yoo-height-b5 yoo-height-lg-b5"></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">Inline text elements</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Inlinetextelements"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="Inlinetextelements">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Inline text elements</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p></span>You can use the mark tag to <span class="nt"><mark></span>highlight<span class="nt"></mark></span> text.<span class="nt"></p></span>
<span class="nt"><p><del></span>This line of text is meant to be treated as deleted text.<span class="nt"></del></p></span>
<span class="nt"><p><s></span>This line of text is meant to be treated as no longer accurate.<span class="nt"></s></p></span>
<span class="nt"><p><ins></span>This line of text is meant to be treated as an addition to the document.<span class="nt"></ins></p></span>
<span class="nt"><p><u></span>This line of text will render as underlined<span class="nt"></u></p></span>
<span class="nt"><p><small></span>This line of text is meant to be treated as fine print.<span class="nt"></small></p></span>
<span class="nt"><p><strong></span>This line rendered as bold text.<span class="nt"></strong></p></span>
<span class="nt"><p><em></span>This line rendered as italicized text.<span class="nt"></em></p></span></code></pre></figure>
</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>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
<div class="yoo-height-b5 yoo-height-lg-b5"></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">Abbreviations</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Abbreviations"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="Abbreviations">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Abbreviations</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<ion-icon name="close"></ion-icon>
</button>
</div>
<div class="modal-body">
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"attribute"</span><span class="nt">></span>attr<span class="nt"></abbr></p></span>
<span class="nt"><p><abbr</span> <span class="na">title=</span><span class="s">"HyperText Markup Language"</span> <span class="na">class=</span><span class="s">"initialism"</span><span class="nt">></span>HTML<span class="nt"></abbr></p></span></code></pre></figure>
</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>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
<div class="yoo-height-b5 yoo-height-lg-b5"></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">Blockquotes Left align</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#Blockquotes"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="Blockquotes">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blockquotes Left align</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"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></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></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>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<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">Blockquotes Right align</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#BlockquotesRightAlign"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="BlockquotesRightAlign">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blockquotes Right align</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"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-right"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></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></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>
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<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">Blockquotes Center align</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#BlockquotesCenterAlign"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="BlockquotesCenterAlign">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blockquotes Center align</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"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote text-center"</span><span class="nt">></span>
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></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></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>
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<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">Blockquotes Center align</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#list"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="list">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Blockquotes Center align</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"><ul</span> <span class="na">class=</span><span class="s">"list-unstyled"</span><span class="nt">></span>
<span class="nt"><li></span>Lorem ipsum dolor sit amet<span class="nt"></li></span>
<span class="nt"><li></span>Consectetur adipiscing elit<span class="nt"></li></span>
<span class="nt"><li></span>Integer molestie lorem at massa<span class="nt"></li></span>
<span class="nt"><li></span>Facilisis in pretium nisl aliquet<span class="nt"></li></span>
<span class="nt"><li></span>Nulla volutpat aliquam velit
<span class="nt"><ul></span>
<span class="nt"><li></span>Phasellus iaculis neque<span class="nt"></li></span>
<span class="nt"><li></span>Purus sodales ultricies<span class="nt"></li></span>
<span class="nt"><li></span>Vestibulum laoreet porttitor sem<span class="nt"></li></span>
<span class="nt"><li></span>Ac tristique libero volutpat at<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></li></span>
<span class="nt"><li></span>Faucibus porta lacus fringilla vel<span class="nt"></li></span>
<span class="nt"><li></span>Aenean sit amet erat nunc<span class="nt"></li></span>
<span class="nt"><li></span>Eget porttitor lorem<span class="nt"></li></span>
<span class="nt"></ul></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>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</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">Inline List</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#InlineList"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="InlineList">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Inline List</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"><ul</span> <span class="na">class=</span><span class="s">"list-inline"</span><span class="nt">></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Lorem ipsum<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Phasellus iaculis<span class="nt"></li></span>
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-inline-item"</span><span class="nt">></span>Nulla volutpat<span class="nt"></li></span>
<span class="nt"></ul></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>
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</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">Description list alignment</h2>
</div>
<div class="yoo-card-heading-right">
<button type="button" class="yoo-card-btn" data-toggle="modal" data-target="#DescriptionListAlignment"><ion-icon name="code"></ion-icon></button>
<!-- Code Modal -->
<div class="modal fade" id="DescriptionListAlignment">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Description list alignment</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"><dl</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
<span class="nt"><dt</span> <span class="na">class=</span><span class="s">"col-sm-3"</span><span class="nt">></span>Description lists<span class="nt"></dt></span>
<span class="nt">