<br/>

<div class="s5_greenbox">
<div class="tl"> </div>
<div class="tr"> </div>
<div class="bl"> </div>
<div class="br"> </div>
<div class="point">


&lt;div class="s5_greenbox"&gt;
&lt;div class="tl"> &lt;/div&gt;
&lt;div class="tr"> &lt;/div&gt;
&lt;div class="bl"> &lt;/div&gt;
&lt;div class="br"> &lt;/div&gt;
Your text here
&lt;/div&gt;
&lt;/div&gt;


</div>
</div>

<br/>
<br/>

<div class="s5_redbox">
<div class="tl"> </div>
<div class="tr"> </div>
<div class="bl"> </div>
<div class="br"> </div>
<div class="point">


&lt;div class="s5_redbox"&gt;
&lt;div class="tl"> &lt;/div&gt;
&lt;div class="tr"> &lt;/div&gt;
&lt;div class="bl"> &lt;/div&gt;
&lt;div class="br"> &lt;/div&gt;
Your text here
&lt;/div&gt;
&lt;/div&gt;


</div>
</div>

<br/>
<br/>


<div class="s5_bluebox">
<div class="tl"> </div>
<div class="tr"> </div>
<div class="bl"> </div>
<div class="br"> </div>
<div class="point">


&lt;div class="s5_bluebox"&gt;
&lt;div class="tl"> &lt;/div&gt;
&lt;div class="tr"> &lt;/div&gt;
&lt;div class="bl"> &lt;/div&gt;
&lt;div class="br"> &lt;/div&gt;
Your text here
&lt;/div&gt;
&lt;/div&gt;


</div>
</div>

<br/>
<br/>


<div class="s5_graybox">
<div class="tl"> </div>
<div class="tr"> </div>
<div class="bl"> </div>
<div class="br"> </div>
<div class="point">


&lt;div class="s5_graybox"&gt;
&lt;div class="tl"> &lt;/div&gt;
&lt;div class="tr"> &lt;/div&gt;
&lt;div class="bl"> &lt;/div&gt;
&lt;div class="br"> &lt;/div&gt;
Your text here
&lt;/div&gt;
&lt;/div&gt;


</div>
</div>

<blockquote><p>This is a sample blockquote. Use <strong>&lt;blockquote&gt;&lt;p&gt;Your content goes 
here!&lt;/p&gt;&lt;/blockquote&gt;</strong> to create a blockquote.</p></blockquote>

<br />


<div class="black_box">This is a styled box. Use <strong>&lt;div class=&quot;black_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="gray_box">This is a styled box. Use <strong>&lt;div class=&quot;gray_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="red_box">This is a styled box. Use <strong>&lt;div class=&quot;red_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="blue_box">This is a styled box. Use <strong>&lt;div class=&quot;blue_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="green_box">This is a styled box. Use <strong>&lt;div class=&quot;green_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="yellow_box">This is a styled box. Use <strong>&lt;div class=&quot;yellow_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />

<div class="orange_box">This is a styled box. Use <strong>&lt;div class=&quot;orange_box&quot;&gt;Your content 
goes here!&lt;/div&gt;</strong></div>

<br />



This is an image with the "boxed" class applied:<br /><br />

<img class="boxed" src="http://www.shape5.com/demo/images/small1.jpg" alt=""></img>
<br />

<br />

<br />



<br />
This is an image with the "padded" class applied:<br /><br />

<img class="padded" src="http://www.shape5.com/demo/images/small1.jpg" alt=""></img>
<br />

<br />

<br />

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

<br />

<div class="code">This is a sample code div. Use <strong>&lt;div 
  class=&quot;code&quot;&gt;Your content goes here!&lt;/div&gt;</strong> to create a code div.<br /><br />#s5_code { width: 30px; color: #fff; line-height: 45px; } </div>

<br />

<ol>
<li>This is an <strong>Ordered List</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ol>

<br />

<ul>
<li>This is an <strong>Unordered List</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ul>

<br />

<ul class="ul_arrow">
<li>This is an <strong>Unordered List with class ul_arrow</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ul>


<br />

<ul class="ul_star">
<li>This is an <strong>Unordered List with class ul_star</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ul>

<br />

<ul class="ul_bullet">
<li>This is an <strong>Unordered List with class ul_bullet</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ul>

<br />

<ul class="ul_bullet_small">
<li>This is an <strong>Unordered List with class ul_bullet_small</strong></li>
<li>Congue Quisque augue elit dolor nibh.</li>
<li>Condimentum elte quis.</li>
<li>Opsum dolor sit amet consectetuer.</li>
</ul>

<br />

The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":
<br /><br />

<ul class="ul_numbers">

<li class="li_number1">This is a sample styled number list <strong>&lt;li class=&quot;li_number1&quot;&gt;Your content 
goes here!&lt;/li&gt;</strong></li>

<li class="li_number2">This is a sample styled number list <strong>&lt;li class=&quot;li_number2&quot;&gt;Your content 
goes here!&lt;/li&gt;</strong></li>

<li class="li_number3">This is a sample styled number list <strong>&lt;li class=&quot;li_number3&quot;&gt;Your content 
goes here!&lt;/li&gt;</strong></li>

<li class="li_number4">This is a sample styled number list <strong>&lt;li class=&quot;li_number4&quot;&gt;Your content 
goes here!&lt;/li&gt;</strong></li>

</ul>

<br />