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
- first level
- second level
- 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>