30/12/2019 Typography

Typography
Detalles Categoría: 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.

phrase Use class="highlight".

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 in Source Title

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 in Source Title

c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 1/7
30/12/2019
Dropcaps
T his 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
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.
Block Number
Lorem ipsum dolor sit
01 amet consectetuer
rutrum dignissim et
neque id. Interdum
pharetra in a metus
congue In Sed
Pellentesque tincidunt
pharetra.
Lorem ipsum dolor sit
02 amet consectetuer
c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1
Typography
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
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.
Lorem ipsum dolor sit
I amet consectetuer
rutrum dignissim et
neque id. Interdum
pharetra in a metus
congue In Sed
Pellentesque tincidunt
pharetra.
Lorem ipsum dolor sit
II amet consectetuer
Definition List
This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit
dolor.
Congue Quisque augue elit
dolor.
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.
Lorem ipsum dolor sit
i amet consectetuer
rutrum dignissim et
neque id. Interdum
pharetra in a metus
congue In Sed
Pellentesque tincidunt
pharetra.
Lorem ipsum dolor sit
ii amet consectetuer
2/7
30/12/2019 Typography

rutrum dignissim et rutrum dignissim et rutrum dignissim et

neque id. Interdum neque id. Interdum neque id. Interdum
pharetra in a metus pharetra in a metus pharetra in a metus
congue In Sed congue In Sed congue In Sed
Pellentesque tincidunt Pellentesque tincidunt Pellentesque tincidunt
pharetra. pharetra. pharetra.

Lorem ipsum dolor sit
03 amet consectetuer
rutrum dignissim et
neque id. Interdum
pharetra in a metus
congue In Sed
Pellentesque tincidunt
pharetra.
Lorem ipsum dolor sit
III amet consectetuer
rutrum dignissim et
neque id. Interdum
pharetra in a metus
congue In Sed
Pellentesque tincidunt
pharetra.
Lorem ipsum dolor sit
iii 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 Lorem ipsum dolor sit amet consectetuer rutrum
dignissim et neque id. Interdum pharetra in a dignissim et neque id. Interdum pharetra in a
metus congue In Sed Pellentesque tincidunt metus congue In Sed Pellentesque tincidunt
pharetra. pharetra.

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

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

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

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

Message Boxes & Legend Styles

Message Boxes with Icons
c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 3/7
30/12/2019 Typography

This is a confirmation 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 error message 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 warning 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 information. 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 sticky. 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 download 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 system message 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 confirmation 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 error message 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 warning 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 information. 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 sticky. 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 download box. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id.
Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.

c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 4/7
30/12/2019 Typography

This is a system message 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.

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.

Buttons & Tags

Big Buttons

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

BUTTON TEXT BUTTON TEXT

Icon Buttons

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

BUTTON TEXT

Small Buttons

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

Rounded Big Buttons

c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 5/7
30/12/2019 Typography

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

BUTTON TEXT BUTTON TEXT

Rounded Icon Buttons

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

BUTTON TEXT

Rounded Small Buttons

BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT BUTTON TEXT

Squared Tags Rounded Tags

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

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

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

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

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

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

Forms
Form Fieldset
Templates Fieldset
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nulla dapibus sapien vel mauris viverra quis
c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 6/7
30/12/2019 Typography

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.

Form Elements
Sample Input 1

Sample Input 2

Sample Radio Input Sample CheckBox Input

Sample Select Field:

Option One

Sample Textarea Field:

Textarea text

SUBMIT BUTTON RESET BUTTON

Typography

c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 7/7