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 class="highlight".

Blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra. Someone famous Source Title

Use .pull-right for a floated, right-aligned blockquote.

This is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra. Someone famous Source Title

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.

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.
  • Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
  • This is a sample Arrowlist.
  • This is a sample Star list.
  • Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
  • This is a sample Starlist.
  • This is a sample Check list.
  • Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.
  • This is a sample Checklist.

Block Number

01Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

02Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

03Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

ALorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

BLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

CLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

aLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

bLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

cLorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Icons Style

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Bubbles

Grey 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

Blue 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

Black 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

Rounded Grey 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

Rounded Blue 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

Rounded Black 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

Message Boxes & Legend Styles

Message Boxes with Icons

This is a calendar. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

This is a download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

Message Boxes - Style 1

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Message Boxes - Style 2

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Rounded Message Boxes with Icons

This is a calendar. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

This is a download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue

Rounded Message Boxes - Style 1

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

Rounded Message Boxes - Style 2

This is a grey box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

This is a hilite box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

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 Legends

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.

Buttons & Tags

Big Buttons

Default Primary Info Success Warning Danger Inverse

Icon Buttons

Default Primary Info Success Warning Danger Inverse

Small Buttons

Default Primary Info Success Warning Danger Inverse

Rounded Big Buttons

Default Primary Info Success Warning Danger Inverse

Rounded Icon Buttons

Default Primary Info Success Warning Danger Inverse

Rounded Small Buttons

Default Primary Info Success Warning Danger Inverse

Squared Tags

This is a sample Default. Use this to provide useful information.

This is a sample Success. Use this to provide useful information.

This is a sample Warning. Use this to provide useful information.

This is a sample Important. Use this to provide useful information.

This is a sample Info. Use this to provide useful information.

This is a sample Inverse. Use this to provide useful information.

Rounded Tags

This is a sample Default. Use this to provide useful information.

This is a sample Success. Use this to provide useful information.

This is a sample Warning. Use this to provide useful information.

This is a sample Important. Use this to provide useful information.

This is a sample Info. Use this to provide useful information.

This is a sample Inverse. Use this to provide useful information.

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-vote to put this badge on any module you like!
 
Use module suffix: _badge badge-hot to put this badge on any module you like!

Forms

Form Fieldset

Templates Fieldset 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 suscipit ac.
Special Fieldset - Style 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.
Special Fieldset - Style 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est.

Form Elements

Written by Super User
Hits: 1148
GetK2

About K2

{jathumbnail off images="images/stories/demo/sample-09.jpg"}

Lorem ipsum dolor sit amet consectetuer vel nunc eros tempus magnis. Lorem ante eros pulvinar laoreet interdum Phasellus vitae id risus Nulla. Convallis Proin at lobortis leo Quisque eros habitasse ornare sed Suspendisse. Orci ligula Sed urna libero pellentesque Integer risus sed gravida semper. Dui justo Nam nec mauris Curabitur Curabitur lobortis eros felis eros. Lacinia egestas Quisque est fermentum In ac lobortis fermentum tincidunt eu. Cursus accumsan.

Nam orci montes sem iaculis risus adipiscing Nam nunc id id. Cursus tempor turpis mauris leo Pellentesque at eget senectus lacus vitae. Porta adipiscing felis Donec ligula sapien dui eget enim quis sapien. Phasellus tincidunt ipsum vel id ultrices laoreet ac interdum Nam quis. Mauris Lorem ut Phasellus Nam adipiscing velit ac egestas feugiat ac. Lacus suscipit Lorem Nullam in Nam vel semper Vivamus lacinia lacinia. Vestibulum a sollicitudin.

Nibh eros lorem Nunc tincidunt libero adipiscing tempor nulla tincidunt convallis. Turpis est rhoncus lacinia adipiscing vitae et Pellentesque Nam leo ornare. Tincidunt non nibh interdum id nec et est nulla leo justo. Urna id sed quis vel Nullam urna non laoreet et Aenean. Pharetra adipiscing Integer interdum nibh id justo ac Donec fermentum auctor. Ac orci Phasellus fringilla ornare Vestibulum sit dapibus Nam arcu Phasellus. Condimentum nibh.

Faucibus elit morbi dignissim auctor In id ultrices quis Nunc ipsum. Interdum platea nibh id massa penatibus nunc tristique montes Nullam habitasse. Tellus sit faucibus sagittis pretium cursus Pellentesque porttitor sed ligula eros. Curabitur adipiscing elit Pellentesque eget ipsum Pellentesque tincidunt volutpat ante velit. At risus lacinia molestie ridiculus non enim Nulla iaculis pellentesque interdum. Id velit lacus sapien magnis sapien.

Written by Super User
Hits: 578
simple image

404 Pages

{jathumbnail off}
Each JA Joomla Template has its own matching 404 page. Below is the screenshot of 404 page style..

Written by Super User
Hits: 522

All positions layout

Nulla dapibus neque sit amet libero  ser suscipit hendrerit. Donec rhoncus mollis suscipit. Mauris posuere turpis eu dui lobortis non iaculis odio tincidunt. Class aptent taciti sociosqu ad litora.

Sodales ac feugiat elit Integer gravida risus eu habitasse ligula Lorem. Id senectus tincidunt metus porta amet sem senectus tellus Curabitur Fusce. Eget Curabitur rutrum Pellentesque Curabitur Nullam orci ut tristique Curabitur lacinia. Tortor consectetuer ac at montes id id neque est leo vel. Phasellus libero ut dui pede sagittis vel auctor dignissim Nunc ante. Nisl in Pellentesque mauris nibh et vel tincidunt auctor fringilla id. Neque elit augue.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut. Tortor consectetuer ac at montes id id neque est leo vel.

Written by Super User
Hits: 257
Sample Images

Offline Page

{jathumbnail off}
Each JA Joomla Template has its own offline page. Below is the screenshot of offline page style.

Written by Super User
Hits: 437