Motion

motion Options

Set your layout

Now using the default layout.

Test Vertical Rhythm?

You are here: Home Focus Typography Special Content Lists & Icons
02 September 2014

Lists & Icons

Social Icons

Sweet Social Icons

These classes are to be used for the social position.

Mini Social

These icons to be used in the header. They shift color in light themes
   

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.

Icon Unordered Lists

  •   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
Icon List Styles 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>