Bullet Lists & Headers

Styling Lists

<p>Unordered list, class of squarelist</p> 
<ul class="squarelist"> 
<li>this is first level 
<ul> 
<li>this is second level</li> 
</ul> 
</li> 
<li>back to first level</li> 
</ul> 
<p>Ordered list, class of numberedlist</p> 
<ol class="numberedlist"> 
<li>first level<ol> 
<li>second level</li> 
</ol></li> 
<li>first level</li> 
</ol> 


Unordered list, class of squarelist

  • this is first level
    • this is second level
  • back to first level

Order list, class of numberedlist

  1. first level
    1. second level
  2. first level

Icon Styled Lists

<ul class="squarelist pdf"> 
<li>item 1</li> 
<li>item 2</li> 
</ul> 
<ul class="squarelist lock"> 
<li>item 1</li> 
<li>item 2</li> 
</ul> 
<ul class="squarelist word"> 
<li>item 1</li> 
<li>item 2</li> 
</ul> 
<ul class="squarelist movie"> 
<li>item 1</li> 
<li>item 2</li> 
</ul> 

  • item 1
  • item 2
  • item 1
  • item 2
  • item 1
  • item 2
  • item 1
  • item 2

<ul class="arrow-list"> 
<li>look</li> 
<li>at</li> 
<li>this list</li> 
</ul>

  • look
  • at
  • this list

Input Lists

<ul class="inputlist"> 
<li><input type="radio" name="test"/> 
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p> 
</li> 
<li><input type="checkbox" /> 
<p>Provide a good mix of investment income and growth on the accumulated assets </p> 
</li> 
<li><input type="radio" name="test"/> 
<p>Provide some investment income and mostly long-term growth on the accumulated assetsthrough investments with fluctuating returns</p> 
</li> 
</ul> 



Title Bars

By default 100% of the parent div, unless adjusted like in the purple example.

<h3 class="title-bar-grey">A title with thick grey underline, case-sensitive</h3> 
<h3 class="title-bar-purple" style="width: 75%;">styled inline to have a width of 75% instead of the default 100%</h3> 
<h3 class="sidebar-title">A title with thick purple underline, case-sensitive</h3> 


A title with thick grey underline, case-sensitive

STYLED INLINE TO HAVE A WIDTH OF 75% INSTEAD OF THE DEFAULT 100%