Resources

Key Concepts

Example Pages

About Joomla!

Typography

Heading Styles
Pre Code Styles
Highlight Styles
Icons Styles
Order List Styles

Bullet Styles
Content Box Styles
Bubble Styles
Blockquote Styles

Blocknumber Styles
Dropcap Styles
Legend Styles
Table Styles

Heading Styles

This is an Heading 1

This is an Heading 2

This is an Heading 3

This is an Heading 4

Pre Code Styles

Below is a sample of <pre> or <div class="code">

#zt-body {
 width: 180px;
 float: right;
 color: #EEEEEE;
}

Highlight Styles

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight1">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight2">Your highlight phrase goes here!</span>.

This is a highlight phrase. Use <span class="highlight3">Your highlight phrase goes here!</span>.

Icons Styles

Use <p class="zt-info">Your info message goes here!</p>.

Use <p class="zt-help">Your info message goes here!</p>.

Use <p class="zt-comment">Your info message goes here!</p>.

Use <p class="zt-accept">Your info message goes here!</p>.

Use <p class="zt-add">Your info message goes here!</p>.

Use <p class="zt-tip">Your info message goes here!</p>.

Use <p class="zt-warning">Your info message goes here!</p>.

Use <p class="zt-error">Your info message goes here!</p>.

Use <p class="zt-email">Your info message goes here!</p>.

Use <p class="zt-phone">Your info message goes here!</p>.

Use <p class="zt-mobile">Your info message goes here!</p>.

Use <p class="zt-time">Your info message goes here!</p>.

Use <p class="zt-world">Your info message goes here!</p>.

Use <p class="zt-book">Your info message goes here!</p>.

Use <p class="zt-stock">Your info message goes here!</p>.

Use <p class="zt-cart">Your info message goes here!</p>.

Use <p class="zt-date">Your info message goes here!</p>.

Use <p class="zt-key">Your info message goes here!</p>.

Use <p class="zt-yes">Your info message goes here!</p>.

Use <p class="zt-no">Your info message goes here!</p>.

Use <p class="zt-male">Your info message goes here!</p>.

Use <p class="zt-female">Your info message goes here!</p>.

Use <p class="zt-tag-blue">Your info message goes here!</p>.

Use <p class="zt-tag-green">Your info message goes here!</p>.

Use <p class="zt-tag-orange">Your info message goes here!</p>.

Use <p class="zt-tag-pink">Your info message goes here!</p>.

Use <p class="zt-tag-purple">Your info message goes here!</p>.

Use <p class="zt-tag-red">Your info message goes here!</p>.

Use <p class="zt-tag-yellow">Your info message goes here!</p>.

Use <p class="zt-green">Your info message goes here!</p>.

Use <p class="zt-yellow">Your info message goes here!</p>.

Use <p class="zt-red">Your info message goes here!</p>.

Order List Styles

Use <ol><li>...</li></ol>.

Suspendisse hendrerit ante vel quam.
Vestibulum nisl. Integer urna.
Aenean hendrerit. Maecenas condimentum.
Sed odio sem, placerat faucibus.

Use <dl><dt>...</dt></dl>.

Suspendisse hendrerit ante vel quam.
Vestibulum nisl. Integer urna.
Aenean hendrerit. Maecenas condimentum.
Sed odio sem, placerat faucibus.

Bullet Styles

This is a sample Circle list.
Condimentum quis.
Congue Quisque augue elit dolor.
Nunc cursus sem et sapien eget.

This is a sample Check list.
Dolor Curabitur Nam Nulla augue id.
Lorem et nunc congue pede auctor
Nunc cursus sem et pretium.

This is a sample Star list
Dolor Curabitur Nam Nulla augue id iaculis.
Lorem et nunc congue pede auctor
Nunc cursus sem et pretium.

This is a sample Arrow list.
Dolor Curabitur Nam Nulla augue id iaculis.
Lorem et nunc congue pede auctor
Nunc cursus sem et pretium.

This is a sample Square list
Dolor Curabitur Nam Nulla augue id iaculis.
Lorem et nunc congue pede auctor
Nunc cursus sem et pretium.

This is a sample Plus list.
Dolor Curabitur Nam Nulla augue id iaculis.
Lorem et nunc congue pede auctor
Nunc cursus sem et pretium.

Content Box Styles

This is a sample clip note. Use <p class="box-info">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-download">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-faq">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="box-flag">Your clip note goes here!</p> to form a clip note!

This is a sample block number.
Use <div class="zt-box1">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box2">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box4">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box5">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box6">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box7">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box8">Your content goes here!</div>!

This is a sample block number.
Use <div class="zt-box9">Your content goes here!</div>!

Bubble Styles