dashing-framework
Version:
Style framework for Dash
82 lines (75 loc) • 4 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/example.css" rel="stylesheet">
<title>Typography</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../../scripts/scripts.js"></script>
<script src="../../scripts/prism.js"></script>
</head>
<body class="example-body">
<div class="main-content">
<div id="sidebarNavigation" class="example-sidebar"></div>
<div class="sidebar--overlay is-hidden"></div>
<div class="main">
<div class="page-header">
<button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button>
<h1>Typography</h1>
<a href="http://design.samaritanministries.org/product/principles/typography/" target="_blank" class="button button--small button--smooth float-right">
View Guidelines
</a>
</div>
<div class="app-content">
<div class="row">
<div class="column column--full">
<h2 class="example-header no-margin--top">Headers <button class="button button--transparent button--copy-link" data-id="copyurl" id="Headers"></h2>
<div class="row example-container">
<div class="column column--full">
<h1>h1. Header 1</h1>
<h2>h2. Header 2</h2>
<h3>h3. Header 3</h3>
<h4>h4. Header 4</h4>
</div>
</div>
<pre><code class="language-html"><h1>h1. Header 1</h1>
<h2>h2. Header 2</h2>
<h3>h3. Header 3</h3>
<h4>h4. Header 4</h4></code>
</pre>
</div>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header">Body Text <button class="button button--transparent button--copy-link" data-id="copyurl" id="Body_Text"></h2>
<div class="row example-container">
<div class="column column--full">
<p>Nunc hendrerit lectus velit, vel fringilla sem molestie at. Etiam orci ipsum, iaculis eu magna vel, commodo efficitur metus. Praesent elementum justo eros, eu efficitur metus interdum ut. Morbi finibus eros in dolor condimentum bibendum.</p>
<p>Aliquam luctus malesuada erat, a efficitur dolor consequat ac. Suspendisse sodales aliquet velit in elementum. Proin malesuada auctor libero, ut accumsan dolor tincidunt in.</p>
<p><strong>Duis fermentum nisi nec ornare volutpat. Donec ultricies ante at nunc consectetur viverra. Pellentesque ac augue lorem. Nulla facilisi.</strong></p>
</div>
</div>
<pre><code class="language-html"><p>Nunc hendrerit lectus velit, vel fringilla sem molestie at. Etiam orci ipsum, iaculis eu magna vel, commodo efficitur metus. Praesent elementum justo eros, eu efficitur metus interdum ut. Morbi finibus eros in dolor condimentum bibendum.</p>
<p>Aliquam luctus malesuada erat, a efficitur dolor consequat ac. Suspendisse sodales aliquet velit in elementum. Proin malesuada auctor libero, ut accumsan dolor tincidunt in.</p>
<p><strong>Duis fermentum nisi nec ornare volutpat. Donec ultricies ante at nunc consectetur viverra. Pellentesque ac augue lorem. Nulla facilisi.</strong></p></code>
</pre>
</div>
</div>
<div class="row">
<div class="column column--full">
<h2 class="example-header">Hyperlinks <button class="button button--transparent button--copy-link" data-id="copyurl" id="Hyperlinks"></h2>
<div class="row example-container">
<div class="column column--full">
<a>Click Here</a>
<p>Phasellus vel luctus libero. <a>Maecenas sit</a> amet leo vestibulum, vehicula arcu id, tempus dolor.</p>
</div>
</div>
<pre><code class="language-html"><a>Click Here</a>
<p>Phasellus vel luctus libero. <a>Maecenas sit</a> amet leo vestibulum, vehicula arcu id, tempus dolor.</p></code>
</pre>
</div>
</div>
</div>
</body>
</html>