JA Typography

This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!

Preformatted text

Headings

This is a sample Heading 1. Lorem ipsum.

This is a sample Heading 2. Lorem ipsum.

This is a sample Heading 3. Lorem ipsum.

This is a sample Heading 4. Lorem ipsum.

This is a sample Heading 5. Lorem ipsum.

Special Content

Below is a sample of <pre> tag or code class:

#ja-rightcol {
width: 180px;
float: right;
color: #EEEEEE;
}

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

Blockquote

This is a sample Blockquote. Use <blockquote class="blockquote-1">Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote class="blockquote-2"><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Dropcaps

This is a Magazine Style Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!

Lists Style

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

  • This is a sample Arrow list.
  • Use <ul class="ja-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Arrowlist.
  • This is a sample Star list.
  • Use <ul class="ja-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Starlist.
  • This is a sample Check list.
  • Use <ul class="ja-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.

Block Number

01Use <p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Your content goes here!</p>

02Use <p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Your content goes here!</p>

03Use <p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Your content goes here!</p>

AUse <p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Your content goes here!</p>

BUse <p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Your content goes here!</p>

CUse <p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Your content goes here!</p>

aUse <p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Your content goes here!</p>

bUse <p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Your content goes here!</p>

cUse <p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Your content goes here!</p>

Icons Style

Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this.

Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.

You are here: Home Typography