Saturday, Jun 19th

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

2560436 comments

  • Comment Link JaneDob Saturday, 19 June 2021 20:23 posted by JaneDob

    [url=http://lasixmed.com/]furosemide cost usa[/url]

  • Comment Link Spotify plaque Saturday, 19 June 2021 20:05 posted by Spotify plaque

    Hi there! I just want to offer you a big thumbs up for the excellent information you have here on this post.
    I'll be returning to your website for more soon.

  • Comment Link supracables Saturday, 19 June 2021 19:53 posted by supracables

    jordan retro 14 candy cane billig white red jordan westbrook 0.2 shoes for cheap billig yeezy 700 lace length billig
    supracables

  • Comment Link MiaDob Saturday, 19 June 2021 19:46 posted by MiaDob

    [url=https://ibviagra.com/]buy generic viagra professional[/url] [url=http://sildenafilwhere.com/]sildenafil no rx[/url] [url=https://cialisway.com/]brand cialis 5 mg[/url] [url=http://accutanpills.com/]buy accutane in usa[/url] [url=https://viagraeci.com/]viagra in canada[/url]

  • Comment Link MiaDob Saturday, 19 June 2021 19:30 posted by MiaDob

    [url=http://tadalafilextra.com/]tadalafil prices in india[/url] [url=https://viagraedmed.com/]viagra caps[/url] [url=https://cialispmed.com/]buy cialis nz[/url] [url=http://hydroxychloroquinemedication.com/]cost of generic plaquenil[/url] [url=https://viagrapap.com/]price of viagra 100mg uk[/url]

  • Comment Link JaneDob Saturday, 19 June 2021 18:33 posted by JaneDob

    [url=http://tadalafilextra.com/]60 mg tadalafil[/url]

  • Comment Link http://brooksmlfg724.cavandoragh.org/the-best-way-to-nurture-your-songs-interest Saturday, 19 June 2021 18:26 posted by http://brooksmlfg724.cavandoragh.org/the-best-way-to-nurture-your-songs-interest

    Its such as you read my thoughts! You seem to understand a lot approximately this,
    like you wrote the guide in it or something. I believe that you just could do with some p.c.
    to pressure the message house a bit, however other than that, that
    is fantastic blog. An excellent read. I'll certainly be
    back.

  • Comment Link instagram takipçi satın al Saturday, 19 June 2021 17:55 posted by instagram takipçi satın al

    https://www.takipcintr.co/ Takipçileri arttırmanın organik yolları da bulunur.

    Ancak bu yollar oldukça emek ister ve ne kadar uğraşsanız da belirli bir takipçiye sahip olmadan büyümeniz neredeyse imkansızdır.

    Bu durumda takipçi satın al paketleri gereklidir denebilir.Hemen takipçi satın al paketlerinden takipcintr ile faydalan

  • Comment Link does medicare cover generic acyclovir Saturday, 19 June 2021 17:09 posted by does medicare cover generic acyclovir

    Good day! I know this is somewhat off topic but I was wondering which blog platform are you using for this website?
    I'm getting fed up of Wordpress because I've had issues with
    hackers and I'm looking at alternatives for another platform.
    I would be fantastic if you could point me in the direction of
    a good platform. https://www.herpessymptomsinmen.org/productacyclovir/

  • Comment Link Payday Loan Online Saturday, 19 June 2021 16:47 posted by Payday Loan Online

    [url=https://badcreditpdl.com/]online loans instant approval[/url]

Leave a comment

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