Lists & Icons

Lists and Icons This is a sample page with examples on list and other icon paragraphs.

Social Icons

These classes are to be used for the social position.

Social Icons

<a class="social-icon facebook" href="#your-link" title="Facebook"> </a> 
<a class="social-icon twitter" href="#your-link" title="Twitter">  </a> 
<a class="social-icon youtube" href="#your-link" title="YouTube"> </a> 
<a class="social-icon vimeo" href="#your-link" title="Vimeo"> </a> 
<a class="social-icon deviantart" href="#your-link" title="DeviantArt"> </a> 
<a class="social-icon forrst" href="#your-link" title="Forrst"> </a> 
<a class="social-icon dribbble" href="#your-link" title="Dribbble"> </a>
<a class="social-icon search" href="#your-link" title="Go to Search"> </a>
<a class="social-icon user" href="#your-link" title="User Login / Account"> </a>
<a class="social-icon rss" href="#your-link" title="RSS Feeds"> </a>

Ordered List

This is a sample Ordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List

This is a sample Unordered List.
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Definition List

This is a sample Definition List.: Condimentum quis.; Congue Quisque augue elit dolor.; Congue Quisque augue elit dolor.

Special Unordered Lists Part 1

This is a sample Style list.
This is a sample Style list.
This is a sample Style list.

This is a sample blog list
This is a sample blog list
This is a sample blog list

This is a sample task list.
This is a sample task list.
This is a sample task list.

This is a sample monitor list
This is a sample monitor list
This is a sample monitor list

This is a sample gears list.
This is a sample gears list.
This is a sample gears list.

Sample Code

Icon List Styles Sample Code Part I

<ul class="ja-typo-list list-gears"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-monitor"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-task"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-menu"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-blog"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-style"><li><span class="icon"> </span>List's content goes here!</li></ul>

Special Unordered Lists Part 2

This is a sample Arrow list.
This is a sample Arrow list.
This is a sample Arrow list.

This is a sample Check list
This is a sample Checklist
This is a sample Checklist

This is a sample Star list.
This is a sample Star list.
This is a sample Star list.

This is a sample Phone list
This is a sample Phonelist
This is a sample Phonelist

This is a sample Address list.
This is a sample Address list
This is a sample Address list

This is a sample Mail list
This is a sample Mail list
This is a sample Mail list

Sample Code

Icon List Styles Sample Code Part II

<ul class="ja-typo-list list-mail"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-address"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>

Business Unordered Lists

This is a sample Address book list.
This is a sample Address book list.
This is a sample Address book list.

This is a sample building list
This is a sample building list
This is a sample building list

This is a sample calculator list.
This is a sample calculator list.
This is a sample calculator list.

This is a sample calendar list
This is a sample calendar list
This is a sample calendar list

This is a sample chart list.
This is a sample chart list
This is a sample chart list

This is a sample chart pie list
This is a sample chart pie list
This is a sample chart pie list

Sample Code

Business Icon List Styles Sample Code

<ul class="ja-typo-list list-address-book"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-building"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-calculator"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-calendar"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-chart"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ja-typo-list list-chart-pie"><li><span class="icon"> </span>List's content goes here!</li></ul>

Icon Paragraph

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.

Sample Code

All Icon Paragraph Styles Sample Code

<p class="ja-typo-icon icon-error"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-message"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-tips"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-key"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-tag"><span class="icon"> </span>Your message goes here!</p>

<p class="ja-typo-icon icon-cart"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-doc"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-note"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-photo"><span class="icon"> </span>Your message goes here!</p>
<p class="ja-typo-icon icon-mobi"><span class="icon"> </span>Your message goes here!</p>

Block Numbers

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 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 Red

Block Number Orange

Block Number Gray

Block Number Black

Sample Code

All Blockquotes Code

<p class="blocknumber"> <span class="bignumber">01</span>Text for Gray Blockquote goes here.</p>	
<p class="blocknumber"> <span class="bignumber green">02</span>Text for Green Blockquote goes here.</p>	
<p class="blocknumber"> <span class="bignumber blue">03</span>Text for Blue Blockquote goes here.</p>	
<p class="blocknumber"> <span class="bignumber orange">04</span>Text for Orange Blockquote goes here.</p>	
<p class="blocknumber"> <span class="bignumber red">05</span>Text for Red Blockquote goes here.</p>	
<p class="blocknumber"> <span class="bignumber black">06</span>Text for Black Blockquote goes here.</p>