Typography 1

Typography 1

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

This is an Heading 1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 2.

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 3

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 4

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 5

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

Lists Style

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  • This is a sample Disc List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • 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 Home list.
  • Use <ul class="ja-typo-list list-home"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Cal list.
  • Use <ul class="ja-typo-list list-cal"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • 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.
  • This is a sample Email list.
  • Use <ul class="ja-typo-list list-email"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.

aUse <p class="blocknumber blocknumber-1"><span class="bignumber">01</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-3"><span class="bignumber">C</span>Your content goes here!</p>

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

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

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

Typography 2

Typography 2

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

T his is a Magazine Style Drop Cap. The first letter in this paragraph is big JA Events bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words..

Blockquote styling

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded

It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form!
Author Name Executive Manager of some company

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words it looks when by its textual.

It is the pervading law of all things organic and inorganic, of all things physical and metaphysical, of all things human and all things superhuman, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable. In its expression, that form!
Author NameExecutive Manager of some company

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words it looks when it is surrounded by its textual it looks when it is surrounded by its textual.

It is the pervading law of all things organic and inorganic,
of all things physical and metaphysical, of all things human and all things superhuman,
of all true manifestations of the head, of the heart, of the soul, that the life is recognizable
in its expression, that form!
Author Name Executive Manager of some company

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words.

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words. In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words.

Code styling

In all fairness to the paragraph itself we probably should type enough to see how it looks when it is surrounded by its textual friends by using more words type enough to see how it looks when it is surrounded by its textual friends by using more words it looks when it is surrounded by its textual it looks when it is surrounded by its textual.

Code?Plain text
<head>
<style type="text/css">
p {font-size: 8pt; font-family: arial,helvetica};
p.big {font-size: 12pt; font-family: arial,helvetica};
</style>
</head>
// Comment example

Lorem ipsum dolor sit amet consectetuer et orci sed turpis eget. Facilisis tincidunt justo vitae eget urna malesuada senectus mus tempus Sed. Justo libero Aenean Aliquam sed nulla Fusce at vel nisl tincidunt. Pellentesque non tempus nibh Praesent cursus elit auctor ante ipsum tellus. Est eu in Donec Integer leo Duis nibh aliquet sodales justo.

Nulla est porta eu vitae lorem id tincidunt id justo congue. Sit dui tincidunt Integer orci vitae leo amet euismod sit porta. Consectetuer vitae feugiat diam neque justo condimentum Ut porttitor eget hac. Wisi ut ante suscipit pellentesque eu Donec quis convallis nibh vel. Vivamus justo neque arcu Maecenas eros Nulla congue molestie cursus pellentesque. Mi orci est Morbi cursus scelerisque tellus tristique dolor hac.

Sample Image The teams brainstormed to come

Lacinia cursus eu ipsum vitae auctor libero sagittis habitant volutpat Nam. Interdum nibh ante vitae Nam Nulla lacinia semper Vivamus parturient Vivamus. Sit nunc mattis tempus Ut Suspendisse In risus interdum eu Vestibulum. Nam vel iaculis tellus Curabitur adipiscing lacinia condimentum elit est purus. Faucibus elit Mauris sem wisi eget ut.

Et dis Cum ac tristique urna pretium Pellentesque neque enim elit. Maecenas Donec Aenean rhoncus Curabitur vel volutpat Nullam Quisque sed suscipit. Nec ut augue Aenean amet velit pulvinar metus magna id Sed. Tortor vitae adipiscing et elit odio quis lacinia ac Sed wisi. Congue magna eros justo Pellentesque Curabitur Quisque tellus convallis ac.

Sample Image The sixth-generation of the fabled Volkswagen Golf, shown here in a German publicity photo.

Et dis Cum ac tristique urna pretium Pellentesque neque enim elit. Maecenas Donec Aenean rhoncus Curabitur vel volutpat Nullam Quisque sed suscipit. Nec ut augue Aenean amet velit pulvinar metus magna id Sed. Tortor vitae adipiscing et elit odio quis lacinia ac Sed wisi. Congue magna eros justo Pellentesque Curabitur Quisque tellus convallis ac.

Message Boxes & Legend Styles

Message Boxes & Legend Styles

This is a sticky. Use <p class="box-sticky">Your clip note goes here!</p> to create a clip note!

This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

This is a grey box. Use <p class="box-grey">Your content goes here!</p> to create a grey box!

This is a hilite box. Use <p class="box-hilite">Your content goes here!</p> to create a hilite box!

Legends

Legend - Style 1

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

Legend - Style 2

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

Rounded Legend - Style 1

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

Rounded Legend - Style 2

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.

Special Module Style

Use module suffix: _badge badge-top to put this badge on any module you like!
Use module suffix: _badge badge-new to put this badge on any module you like!
Use module suffix: _badge badge-pick to put this badge on any module you like!
Use module suffix: _badge badge-hot to put this badge on any module you like!

Icons Style & Bubbles Options

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.

Bubbles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.

Author Name

Images, Buttons and Icon Styling

Images Styling

Sample Image
Sample Image
Sample Image
Sample Image This is caption
Sample Image This is caption
Sample Image This is caption
Sample Image This is caption
Sample Image This is caption
Sample Image
Sample Image
Sample Image

Icons Style

You are here: Home When & Where? Demo Typography