Saturday, Aug 24th

Last update 07:02:40 PM EST

Friday, 11 April 2008 02:47

Typography

Written by  Administrator
Rate this item
(0 votes)

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>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote><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.

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 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!

Message Boxes - Style 1

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!

Message Boxes - Style 2

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!

Rounded Message Boxes with Icons

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!

Rounded Message Boxes - Style 1

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!

Rounded Message Boxes - Style 2

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

Squared Tags

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

Rounded Tags

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. Use this to provide useful information.

This is a sample Inline Tag. 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-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!

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





Last modified on Tuesday, 12 October 2010 04:17

2318333 comments

  • Comment Link Leopoldo Thursday, 08 August 2019 08:21 posted by Leopoldo

    Could I make an appointment to see ? http://soupwithsophie.com/kpa-viagra-i-sverige-forum-fc5c.pdf generic viagra professional sildenafil 100mg Scheindlin’s view of cops as essentially racial victimizers leaped from every sentence of her decision. As just one revealing example, she cited President Obama’s remarks about the Trayvon Martin killing to support her condemnation of stop-question-frisk. Those are connected in only one place, and that is Scheindlin’s imagination.

  • Comment Link Tommy Thursday, 08 August 2019 08:21 posted by Tommy

    I live in London http://shiyomateccorp.com/tracie-martyn-absolute-purity-toner-reviews-05bc.pdf tracie martyn absolute purity toner reviews "Right now we're not in the pricing stage yet. We're still trying to figure out a way whether we can get this piece of asset and fully integrate it," said Alex Xu, the company's co-chief financial officer, in a telephone interview with Reuters.

  • Comment Link Ambrose Thursday, 08 August 2019 08:21 posted by Ambrose

    I enjoy travelling http://soupwithsophie.com/order-vigrx-plus-uk-fc5c.pdf vigrx cheap uk While it's unclear what relation Ryan had to Bulger, Boston attorney Mitchell Gagabedian, who represented two former Catholic Memorial High School students who successfully sued the archdiocese in 2002 over the abuse, said the relationship between the priest and reputed mob boss doesn't come as a shock.

  • Comment Link Robby Thursday, 08 August 2019 08:21 posted by Robby

    Sorry, you must have the wrong number http://casaterracenasalerno.it/zoloft-or-cipralex-for-anxiety-9622.pdf que es cipralex medicamento But Armstrong did receive one piece of good news this week. On Monday, federal judge Morrison England all but dismissed a $5 million lawsuit against Armstrong, his cronies and his publishers regarding a pair of bestselling books Armstrong authored at the peak of his lucrative deceptions.

  • Comment Link Leonel Thursday, 08 August 2019 08:21 posted by Leonel

    Could you ask her to call me? https://pos-itive.com.ve/dunes-family-pharmacy-app-660c.pdf dunes family pharmacy Philippe has long been doubted as a worthy successor of Albert, but after years of wooden and timid public performances, the new monarch -- silver-haired and bespectacled -- came across as confident and pressure-proof.

  • Comment Link Angel Thursday, 08 August 2019 08:21 posted by Angel

    Could I borrow your phone, please? https://nipponesthetic.com/levitra-webmd-0596.pdf levitra webmd "It's clear that they're out to hit the protesters personally, not just disperse them. They follow them, corral them and make disproportionate and abusive use of tear gas and rubber bullets," said Roque.

  • Comment Link Sydney Thursday, 08 August 2019 08:21 posted by Sydney

    Could I have a statement, please? https://www.hedgefundtips.com/womenhealthcaretipscom-f0e5.pdf internationalhealthcare.in The Civil Aviation Authority said: “Airlines are responsible for operating aircraft within the manufacturer’s stated restrictions. This includes maximum take-off and landing weights, but operators must also consider other variables such as the length of the runway, any obstacles that must be cleared during the initial climb-out phase, wind speed and direction, elevation, and the outside air temperature.”

  • Comment Link Hipolito Thursday, 08 August 2019 08:21 posted by Hipolito

    Where's the nearest cash machine? https://fandf.com.ng/emedcomau-pty-ltd-0b25.pdf mermed.com.au Some Canadian aboriginal bands briefly blockaded roads and rail lines in January - as well as the Ottawa building where Prime Minister Stephen Harper has an office - as part of a national protest called "Idle No More" against the poor living conditions of many native people.

  • Comment Link Buster Thursday, 08 August 2019 08:21 posted by Buster

    Another year https://anhhaimobile.com/venusmedicinegr-472a.pdf sleepmedicine.gr In a fatal accident inquiry report into John Willock’s death yesterday, Sheriff Colin Pettigrew found a “number of concerns and shortcomings” in how NHS 24 call handlers and nurses dealt with Mr Willock’s pleas.

  • Comment Link Arlie Thursday, 08 August 2019 08:21 posted by Arlie

    Is it convenient to talk at the moment? http://eitchr.com/index.php/l-arginine-facts-d40a.pdf does l arginine make your hair grow The company said in recent weeks that it was being investigated, along with Danone, Nestle, Abbott Laboratories and Hong Kong-listed Biostime International Holdings, by China's National Development and Reform Commission, an economic planning agency, for possible antitrust violations including price-fixing.

Leave a comment

Make sure you enter the (*) required information where indicated.
Basic HTML code is allowed.