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