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

2318332 comments

  • Comment Link Aiden Sunday, 11 August 2019 07:48 posted by Aiden

    What's the last date I can post this to to arrive in time for Christmas? http://www.findingthelink.com/stmap_17yejje.html?dimenhydrinate.olmesartan.viagra solvay-pharma.uz The victory also offers the hawkish Abe more leeway to advance his conservative policy goals, including revising the country's pacifist constitution and bolstering Japan's military, which could further strain ties with key neighbors China and South Korea, who are embroiled in territorial disputes with Japan.

  • Comment Link Billie Sunday, 11 August 2019 07:48 posted by Billie

    A staff restaurant https://www.eandfenvironmental.com/stmap_72qi0cu.html?levitra.olanzapine.diskus sinequan 150 mg It is still unclear if the recession-hit euro area hasturned the corner. But the data pointed to more sustainablestrength in Britain, where the services sector is growing at itsfastest pace in more than six years.

  • Comment Link Raleigh Sunday, 11 August 2019 07:48 posted by Raleigh

    Could I ask who's calling? https://www.lovejoyku.com/stmap_17rudco.html?glyset.leukeran.cialis.lisinopril body of brutality Giving a speech at the Institute for Public Policy Research at Glasgow University, the UK Government minister accused the Nationalists of attempting to “de-risk, deflect and distract” from the challenges that would face an independent Scotland.

  • Comment Link Bobbie Sunday, 11 August 2019 07:48 posted by Bobbie

    I love the theatre https://www.josephinasobsessions.com/stmap_72zgn4.html?metoprolol.rhinocort.viagra mobic 7.5mg price United Parcel Service Inc and other companies are dropping coverage for working spouses, and many more are raising deductibles or switching to high-deductible health plans. Many companies are focused on wellness plans and on adding surcharges for undesirable behavior like smoking.

  • Comment Link Hannah Sunday, 11 August 2019 07:48 posted by Hannah

    What do you do? http://www.psimtropem.pl/stmap_17ng9bd.html?cialis.maxaquin.klaricid neosize xl amazon The EPA documents seen by Reuters could not be independentlyverified. They were dated Aug. 26 and Sept. 6, around the sametime that the agency submitted its proposal to the White HouseOffice of Management and Budget.

  • Comment Link Shaun Sunday, 11 August 2019 07:48 posted by Shaun

    I'm on holiday https://www.enricofonseca.com.br/stmap_17huq8j.html?cabergoline.viagra.cafergot havana club maximo prezzo Sounds cool, right? The only problem: It didn't work as advertised. When the Motorola representative attempted to show that his DROID would only recognize his voice, he asked someone else to try to speak to it. And it recognized the person's voice. The rep was clearly a bit embarrassed and attributed the issue to all the noise in the room. Either way, the feature didn't really seem to work.

  • Comment Link Marvin Sunday, 11 August 2019 07:48 posted by Marvin

    Looking for a job https://vivekarts.com/stmap_17eldb5.html?kamagra.oxsoralen.renova.cialis benicar yahoo answers So many products, potions, pills and procedures routinely marketed as "anti-aging" illustrates a key challenge in the attempt to age well, which is to say, to feel vital and relevant for as long as humanly possible, says Kessler, who counts herself among the boomers but doesn't reveal her chronological age (more on that later).

  • Comment Link Loren Sunday, 11 August 2019 07:48 posted by Loren

    I'm afraid that number's ex-directory http://www.findingthelink.com/stmap_17yejje.html?olmesartan.mastigra.clomid.cialis quest nutrition labs Favelas are informal developments often cut off from city services and they are an example of the wide inequalities in Brazil. They are filled with impoverished people from the provinces who come to the richer cities in search of economic opportunities.

  • Comment Link Willian Sunday, 11 August 2019 07:48 posted by Willian

    Stolen credit card https://www.josephinasobsessions.com/stmap_72plsey.html?epivir-hbv.viagra.ceftin what is adapalene cream used for Police have given no indication that was the case with Lord. No one has been charged, but police have called Edwin J. Alemany a “person of interest.” The 28-year-old has been accused of attacking two other women in the same area Tuesday and Wednesday.

  • Comment Link Rodger Sunday, 11 August 2019 07:48 posted by Rodger

    I'd like to open a personal account https://www.cityview.tk/index.php/stmap_17sq4yz.html?levitra.phenazopyridine.combivir do you need prescription cialis uk Deputy Prime Minister of Japan, Minister of Finance, Taro Aso, right, and Haruhiko Kuroda, Governor of the Bank of Japan speak as they attend a group photo ceremony after a meeting of the Group of 20 finance ministers in Moscow, Russia, Saturday, July 20, 2013. The finance chiefs of the world's leading economies hope to force multinational companies to pay more taxes by closing loopholes that have allowed them to stash profits overseas.

Leave a comment

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