Text Formating

This is a sample page to present pre-formatted typography like paragraph, columns or text highlight.

Headings

This is a sample Heading 1

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a sample Heading 2

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a sample Heading 3

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a sample Heading 4

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

This is a sample Heading 5

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Special Content

Text Highlight

This is a highlight phrase.
Use <span class="highlight">Your highlight phrase goes here!</span>.

Code Wrapping

Below is a sample of <pre> tag or code class:

<div class="ja-typo-pre-title">Code Title</div>
<pre>Your code goes here, and 
replace < symbols with &lt; </pre>

You can also use this as a content toggle.

Brilliant isn't it?

Code Highlight

Thanks to Syntax Highlighter by Alex Gorbatchev, now you can use {code} ..your code goes here.. {/code}

Example:

	<style>
	#ja-rightcol {
		width: 180px;
		float: right;
		color: #EEEEEE;
	}
	</style>

Content Columns

<div class="ja-typo-colswrap cols-2">
	<h3 class="ja-typo-title" style="margin:0"><span>2 Columns Title</span></h3>
	<div class="ja-typo-column">
		<h4><span>Column 1 Title</span></h4>
		<p>Column text...</p>
	</div>
	<div class="ja-typo-column last">
		<h4><span>Column 2 Title</span></h4>
		<p>Column 2 Text</p>
	</div>
</div>

<div class="ja-typo-colswrap cols-3">
	<h3 class="ja-typo-title" style="margin:0"><span>3 Columns Title</span></h3>
	<div class="ja-typo-column">
		<h4><span>Column 1 Title</span></h4>
		<p>Column text...</p>
	</div>
	<div class="ja-typo-column">
		<h4><span>Column 2 Title</span></h4>
		<p>Column 2 Text</p>
	</div>
	<div class="ja-typo-column last">
		<h4><span>Column 3 Title</span></h4>
		<p>Column 3 Text</p>
	</div>				
</div>

<div class="ja-typo-colswrap cols-4">
	<h3 class="ja-typo-title" style="margin:0"><span>4 Columns Title</span></h3>
	<div class="ja-typo-column">
		<h4><span>Column 1 Title</span></h4>
		<p>Column text...</p>
	</div>
	<div class="ja-typo-column">
		<h4><span>Column 2 Title</span></h4>
		<p>Column 2 Text</p>
	</div>
	<div class="ja-typo-column">
		<h4><span>Column 3 Title</span></h4>
		<p>Column 3 Text</p>
	</div>	
	<div class="ja-typo-column last">
		<h4><span>Column 4 Title</span></h4>
		<p>Column 4 Text</p>
	</div>				
</div>

CSS3 Columns

2 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p class="css3-columns2">
Sample text..
</p>

3 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 <p class="css3-columns3">
Sample text..
 </p>
 

4 Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 <p class="css3-columns4">
Sample text..
 </p>
 

Blockquotes

This is a sample Blockquote.
Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Special Blockquotes

This is a sample Left Floating Blockquote.
Use <blockquote class="left">Your quote goes here!</blockquote> to form a quote.
Nisi tellus rhoncus urna, tincidunt rutrum nisl ante vel leo. Cras ac risus a ligula tincidunt posuere arcu vel mollis condimentum!

This is a sample Rounded Blockquote.
Use <blockquote class="background">Your quote goes here!</blockquote> to form a quote like this.
Nisi tellus rhoncus urna, tincidunt rutrum nisl ante vel leo. Cras ac risus a ligula tincidunt posuere arcu vel mollis condimentum!

Dropcaps

The first letter in this paragraph is exageratedly big to atract attention, and this represents the most used typographycal technique by magazines. This enables your Joomla! template to use the magazine style drop capitalize technique and CSS2 styling for the first-letter pseudo class.
Use <p><span class="dropcap">Y</span>our content goes here!</p> to form a dropcap!