This page demonstrates the typographical features that are included in Ikarus out of the box. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p>

<h1>This is an Heading 1</h1>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>

<h2>This is an Heading 2</h2>
<p>Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst.</p>

<p>Below is a sample of <strong>&lt;pre&gt;</strong> or <strong>&lt;div class="code"&gt;</strong></p>
<pre>
#rightcol {
	width: 180px;
	float: right;
	color: #EEEEEE;
}
</pre>

<h3>This is an Heading 3</h3>
<p>Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.</p>

<ol>
<li>This is a sample <strong>Ordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetuer.</li>
<li>Condimentum quis.</li>
<li>Congue Quisque augue elit dolor nibh.</li>
</ol>

<h4>This is an Heading 4</h4>
<p>Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst. Nunc cursus sem et pretium sapien eget consectetuer malesuada Phasellus Curabitur.</p>

<ul>
<li>This is a sample <strong>Unordered List</strong>.</li>
<li>Condimentum quis.</li>
<li>Congue Quisque augue elit dolor.</li>
<li>Nunc cursus sem et pretium sapien eget.</li>
</ul>

<ul class="checklist">
<li>This is a sample <strong>Check list</strong>. Interdum Vestibulum Sed Lorem eu </li>
<li>Dolor Curabitur Nam Nulla augue id iaculis a nec Cum at.</li>
<li>Lorem et nunc congue pede auctor condimentum habitasse rutrum</li>
<li>Nunc cursus sem et pretium sapien eget.</li>
</ul>

<ul class="stars">
<li>This is a sample <strong>Unordered list</strong>. Interdum Vestibulum Sed Lorem eu </li>
<li>Dolor Curabitur Nam Nulla augue id iaculis a nec Cum at.</li>
<li>Lorem et nunc congue pede auctor condimentum habitasse rutrum</li>
<li>Nunc cursus sem et pretium sapien eget.</li>
</ul>

<div class="bubble1"><div><div><div><div><div>
    This is a sample Bubble. Use &lt;<strong>div class="bubble1"&gt;</strong> &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; Your Bubble goes here! &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;span class="author"&gt;ROUNDED SPEECH BUBBLE&lt;/span&gt;
<strong>&lt;/div&gt;</strong>
</div></div></div></div></div>
<span class="author">ROUNDED SPEECH BUBBLE</span>.
</div>

<div class="bubble2"><div><div><div><div><div>
  This is a sample Bubble. Use &lt;<strong>div class="bubble2"&gt;</strong>&lt;div&gt;&lt;div&gt;&lt;div&gt; &lt;div&gt;&lt;div&gt;Your Bubble goes here! &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span class="author"&gt;SQUARE SPEECH BUBBLE.&lt;/span&gt;
<strong>&lt;/div&gt;</strong>
</div></div></div></div></div>
<span class="author">SQUARE SPEECH BUBBLE</span>.
</div>

<div class="bubble3"><div><div><div><div><div>
    This is a sample Bubble. Use &lt;<strong>div class="bubble3"&gt;</strong> &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; &lt;div&gt; Your Bubble goes here! &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/div&gt;&lt;span class="author"&gt;ROUNDED THINKING BUBBLE&lt;/span&gt;
<strong>&lt;/div&gt;</strong>
</div></div></div></div></div>
<span class="author">ROUNDED THINKING BUBBLE</span>.
</div>

<div class="bubble4"><div><div><div><div><div>
  This is a sample Bubble. Use &lt;<strong>div class="bubble4"&gt;</strong>&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt;&lt;div&gt; Your Bubble goes here! &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;span class="author"&gt;SQUARE THINKING BUBBLE&lt;/span&gt;
<strong>&lt;/div&gt;</strong>
</div></div></div></div></div>
<span class="author">SQUARE THINKING BUBBLE</span>.
</div>

<p class="stickynote">This is a sample clip note. Use <strong>&lt;p class="stickynote"&gt;Your clip note goes here!&lt;/p&gt;</strong> to form a clip note!</p>

<p class="download">This is a sample download. Use <strong>&lt;p class="download"&gt;Your download goes here!&lt;/p&gt;</strong> to form a download!</p>

<blockquote><span class="open">T</span>his is a sample Blockquote. Use <strong>&lt;blockquote&gt;Your quote goes here!&lt;/blockquote&gt;</strong> to form a quote!</blockquote>

<blockquote><span class="open">T</span>his is a sample Blockquote. Use <strong>&lt;div class="blockquote"&gt;&lt;blockquote&gt;Your quote goes here!&lt;/blockquote&gt;&lt;/div&gt;</strong> to form a quote<span class="close">!</span></blockquote>

<ol class="smallnumber">
<li class="number-1">This is a sample block small number. Use <strong>&lt;li class="number-1"&gt;Your content goes here!&lt;/li&gt;</strong> to form a block small number!</li>

<li class="number-2">This is a sample block small number. Use <strong>&lt;li class="number-2"&gt;Your content goes here!&lt;/li&gt;</strong> to form a block small number!</li>

<li class="number-3">This is a sample block small number. Use <strong>&lt;li class="number-3"&gt;Your content goes here!&lt;/li&gt;</strong> to form a block small number!</li>

<li class="number-4">This is a sample block small number. Use <strong>&lt;li class="number-4"&gt;Your content goes here!&lt;/li&gt;</strong> to form a block small number!</li>
</ol>

<p class="blocknumber"><span class="bignumber">01</span>This is a sample block number. Use <strong>&lt;p class="blocknumber"&gt;&lt;span class="bignumber"&gt;01.&lt;/span&gt;Your content goes here!&lt;/p&gt;</strong> to form a block number!</p>

<p class="blocknumber"><span class="bignumber">02</span>This is a sample block number. Use <strong>&lt;p class="blocknumber"&gt;&lt;span class="bignumber"&gt;02.&lt;/span&gt;Your content goes here!&lt;/p&gt;</strong> to form a block number!</p>

<p class="blocknumber"><span class="bignumber">03</span>This is a sample block number. Use <strong>&lt;p class="blocknumber"&gt;&lt;span class="bignumber"&gt;03.&lt;/span&gt;Your content goes here!&lt;/p&gt;</strong> to form a block number!</p>

<p class="error">This is a sample error message. Use <strong>&lt;p class="error"&gt;Your error message goes here!&lt;/p&gt;</strong>.</p>

<p class="message">This is a sample info message. Use <strong>&lt;p class="message"&gt;Your info message goes here!&lt;/p&gt;</strong>.</p>

<p class="tips">This is a sample tips message. Use <strong>&lt;p class="tips"&gt;Your tips goes here!&lt;/p&gt;</strong>.</p>

<p>This is a <span class="highlight">highlight phrase</span>. Use <strong>&lt;span class="highlight"&gt;Your highlight phrase goes here!&lt;/span&gt;</strong>.</p>

<p><span class="dropcap">T</span>his is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Mageia bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words.</p>

<div class="legend">
<h3 class="legend-title">Legend style</h3>
<p>Use <strong>&lt;div class="legend"&gt;&lt;h3 class="legend-title"&gt;Your title&lt;/h3&gt;&lt;p&gt;</strong>Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.<strong>&lt;/p&gt;&lt;/div&gt;</strong></p></div>