Saturday, Aug 08th

Last update 07:02:40 PM EST

Friday, 11 April 2008 02:47

Typography

Written by  Administrator
Rate this item
(1 Vote)

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

2260891 comments

  • Comment Link Hettiefxyv Thursday, 23 July 2020 08:09 posted by Hettiefxyv

    why viagra
    viagra doses recommended
    who is yhe hot viagra girl on ad

  • Comment Link Trudieuuwx Thursday, 23 July 2020 08:09 posted by Trudieuuwx

    male viagra prank x
    does viagra make it hard to come
    why take viagra

  • Comment Link Raeannylql Thursday, 23 July 2020 08:09 posted by Raeannylql

    what medication are you not supposed to take with viagra
    generic viagra
    cialis v viagra discussion

  • Comment Link Dennyawuz Thursday, 23 July 2020 08:09 posted by Dennyawuz

    viagra complete porn movies
    viagra generic
    can you use viagra when you are taking bystolic

  • Comment Link JaneDob Thursday, 23 July 2020 08:08 posted by JaneDob

    [url=https://xenical24.com/]xenical drug[/url]

  • Comment Link JimDob Thursday, 23 July 2020 08:08 posted by JimDob

    [url=https://amoxicillinz.com/]amoxicillin 500mg[/url] [url=https://cymbaltaduloxetine.com/]buy cymbalta[/url] [url=https://sildenafil36.com/]sildenafil 100mg[/url] [url=https://baclofen24.com/]baclofen tablets[/url] [url=https://ventolinh.com/]buy ventolin[/url] [url=https://valtrex.us.org/]buy valtrex[/url]

  • Comment Link Iolaqvhg Thursday, 23 July 2020 08:08 posted by Iolaqvhg

    I drop a leave a response each time I especially enjoy a article on a blog or I have something to add to the discussion. It is a result of the passion displayed in the post I read. And on this post CF Colors v 2.1, Post Formats Admin UI v1.3.1, and Social v2.10 : alexking.org. I was actually moved enough to create a comment :-P I do have a couple of questions for you if you tend not to mind. Is it just me or does it give the impression like some of the comments come across as if they are left by brain dead folks? :-P And, if you are writing on other online sites, I'd like to follow anything new you have to post. Could you list the complete urls of your community pages like your Facebook page, twitter feed, or linkedin profile?

  • Comment Link Terrayyvx Thursday, 23 July 2020 08:07 posted by Terrayyvx

    how to get viagra over the counter
    buy generic viagra
    what natural herb works like viagra?

  • Comment Link Slyviabkeb Thursday, 23 July 2020 08:07 posted by Slyviabkeb

    buy viagra online without prescriptions
    how to take viagra recreationally
    how to take viagra pills

  • Comment Link Rositadcrw Thursday, 23 July 2020 08:07 posted by Rositadcrw

    when can we get generic viagra ?
    how much does viagra cost with a subscription
    when will a doctor prescipe viagra

Leave a comment

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