<p>JSN Time 2 was re-designed with more emphasis on modern typography and we believe it provides the most comprehensive content presentation capability. Everything was designed with high level of refinement. Let's take a look at some examples below.</p>
<h3>Headings</h3>
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
<p>In Sun Framework, you will only need to adjust ONE base size for headings (h5 equivalent), we will do all the math for you and the magic will happen in your site.</p>

<h1>h1. Sun heading</h1>
<h2>h2. Sun heading</h2>
<h3>h3. Sun heading</h3>
<h4>h4. Sun heading</h4>
<h5>h5. Sun heading (used as base heading size)</h5>
<h6>h6. Sun heading</h6>
<pre><code>
&lt;h1&gt;h1. Sun heading&lt;/h1&gt;
&lt;h2&gt;h2. Sun heading&lt;/h2&gt;
&lt;h3&gt;h3. Sun heading&lt;/h3&gt;
&lt;h4&gt;h4. Sun heading&lt;/h4&gt;
&lt;h5&gt;h5. Sun heading (used as base heading size)&lt;/h5&gt;
&lt;h6&gt;h6. Sun heading&lt;/h6&gt;
</pre></code>

<h3>Blockquotes</h3>

<h4>Default blockquote</h4>
<p>Wrap <code>&lt;blockquote&gt;</code> around any HTML as the quote. For straight quotes, we recommend a <code>&lt;p&gt;</code>.</p>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<pre><code>&lt;blockquote&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
<span class="nt">&lt;/blockquote&gt;</span></code></pre>

<h4>Blockquote options</h4>
<p>Style and content changes for simple variations on a standard <code>&lt;blockquote&gt;</code></p>
<h5>Naming a source</h5>
<p>Add a <code>&lt;footer&gt;</code> for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code></p>

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<pre><code>&lt;blockquote&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;
&lt;footer&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/footer&gt;
&lt;/blockquote&gt;</pre></code>


<h5>Alternate displays</h5>

<p>Add <code>&lt;.blockquote-reverse&gt;</code> for a blockquote with right-aligned content.</p>

<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<pre><code>&lt;blockquote class="blockquote-reverse"&gt;<br /> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;/p&gt;<br /> &lt;footer&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/footer&gt;<br />&lt;/blockquote&gt;</pre></code>

 

<h3>Address</h3>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@gmail.com</a>
</address>

<pre><code>&lt;address&gt;
&lt;strong&gt;Twitter, Inc.&lt;/strong&gt;&lt;br&gt;
795 Folsom Ave, Suite 600&lt;br&gt;
San Francisco, CA 94107&lt;br&gt;
&lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; (123) 456-7890
&lt;/address&gt;&lt;/pre&gt;&lt;/code&gt;

&lt;address&gt;
&lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;
&lt;a href="mailto:#"&gt;first.last@gmail.com&lt;/a&gt;
&lt;/address&gt;</pre></code>

<h2>Further Information</h2>

For further typography styles, please check Bootstrap 3's Offical Documentation here: <a href="http://getbootstrap.com/css/#type">http://getbootstrap.com/css/#type</a>