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.
Examples on icon paragraphs, block number paragraphs and dropcaps.
Icon Paragraph
Example page for DIV based content columns and also CSS3 columns.
Content Columns DIV based
2 Columns
Column 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.
Column 2
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
<div class="ol-typo-colswrap cols-2"> <h3 class="ol-typo-title" style="margin:0"><span>2 Columns Title</span></h3> <div class="ol-typo-column"> <h4><span>Column 1 Title</span></h4> <p>Column text...</p> </div> <div class="ol-typo-column last"> <h4><span>Column 2 Title</span></h4> <p>Column 2 Text</p> </div> </div>
3 Columns
Column 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.
Column 2
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Column 3
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
<div class="ol-typo-colswrap cols-3"> <h3 class="ol-typo-title" style="margin:0"><span>3 Columns Title</span></h3> <div class="ol-typo-column"> <h4><span>Column 1 Title</span></h4> <p>Column text...</p> </div> <div class="ol-typo-column"> <h4><span>Column 2 Title</span></h4> <p>Column 2 Text</p> </div> <div class="ol-typo-column last"> <h4><span>Column 3 Title</span></h4> <p>Column 3 Text</p> </div> </div>
4 Columns
Column 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.
Column 2
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Column 3
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Column 4
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<div class="ol-typo-colswrap cols-4"> <h3 class="ol-typo-title" style="margin:0"><span>4 Columns Title</span></h3> <div class="ol-typo-column"> <h4><span>Column 1 Title</span></h4> <p>Column text...</p> </div> <div class="ol-typo-column"> <h4><span>Column 2 Title</span></h4> <p>Column 2 Text</p> </div> <div class="ol-typo-column"> <h4><span>Column 3 Title</span></h4> <p>Column 3 Text</p> </div> <div class="ol-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>
<p class="ol-typo-icon icon-error"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-message"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-tips"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-key"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-tag"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-cart"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-doc"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-note"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-photo"><span class="icon"> </span>Your message goes here!</p> <p class="ol-typo-icon icon-mobi"><span class="icon"> </span>Your message goes here!</p>
Block Numbers
Block Number Blue
ALorem 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.
BLorem 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.
Block Number Mint
01Lorem 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.
02Lorem 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.
Block Number Red
01Lorem 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.
02Lorem 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.
Block Number Pink
ALorem 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.
BLorem 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.
Block Number Green
01Lorem 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.
02Lorem 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.
Block Number Orange
ALorem 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.
BLorem 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.
Block Number Gray
01Lorem 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.
02Lorem 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.
Block Number Black
ALorem 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.
BLorem 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.
<p class="blocknumber"> <span class="bignumber orange">04</span>Text for Orange Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber green">02</span>Text for Green Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber mint">03</span>Text for Mint Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber blue">03</span>Text for Blue Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber pink">05</span>Text for Pink Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber red">05</span>Text for Red Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber">01</span>Text for Gray Blocknumber goes here.</p> <p class="blocknumber"> <span class="bignumber black">06</span>Text for Black Blocknumber goes here.</p>
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!
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!
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!
