Lists & 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.
<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
<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
<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
<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
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
<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>
