Вы находитесь на странице: 1из 7

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 Typography

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 Un-Ordered List Definition List
This is a sample Definition List.
1. This is a sample Ordered This is a sample Unordered Condimentum quis.
List. List. Congue Quisque augue elit
2. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet dolor.
consectetur consectetur Congue Quisque augue elit
Lorem ipsum dolor sit amet dolor.
3. Lorem ipsum dolor sit amet
consectetur consectetur

4. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
consectetur
consectetur

Special Unordered Lists


This is a sample Arrow list. This is a sample Star list. This is a sample Check list.
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
consectetuer rutrum consectetuer rutrum consectetuer rutrum
dignissim et neque id. dignissim et neque id. dignissim et neque id.
Interdum pharetra in a Interdum pharetra in a Interdum pharetra in a
metus congue In Sed metus congue In Sed metus congue In Sed
Pellentesque tincidunt Pellentesque tincidunt Pellentesque tincidunt
pharetra. pharetra. pharetra.
This is a sample Arrowlist. This is a sample Starlist. This is a sample Checklist.

Block Number
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
01 amet consectetuer I amet consectetuer i amet consectetuer
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 Lorem ipsum dolor sit Lorem ipsum dolor sit
02 amet consectetuer II amet consectetuer ii amet consectetuer

c0280265.ferozo.com/demor/index.php/typography?tmpl=component&print=1 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 Lorem ipsum dolor sit Lorem ipsum dolor sit
03 amet consectetuer III amet consectetuer iii amet consectetuer
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.

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