Articles

Lists & Icons

Lists and IconsThis 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

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. 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 menu list.
  •   This is a sample menu list.
  •   This is a sample menu 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.

 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.

 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.

 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.

 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.

 

 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.

 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.

 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.

 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.

 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

 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 Orange

 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 Gray

 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 Black

 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.

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>	
You are here: Home