Back To Top

Typography

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"></p> <pre>#zt-body {<br /> width: 180px;<br /> float: right;<br /> color: #EEEEEE;<br />}</pre> <p id="highlight-styles" class="zt-typo-title">Highlight Styles

This is a highlight phrase. Use <span class="<strong>highlight</strong>">Your highlight phrase goes here!</span>.</em></p> <p>This is a <span class="highlight1">highlight phrase. Use <span class="<strong>highlight1</strong>">Your highlight phrase goes here!</span>.</em></p> <p>This is a <span class="highlight2">highlight phrase. Use <span class="<strong>highlight2</strong>">Your highlight phrase goes here!</span>.</em></p> <p>This is a <span class="highlight3">highlight phrase. Use <span class="<strong>highlight3</strong>">Your highlight phrase goes here!</span>.</em></p><p id="icons-styles" class="zt-typo-title">Icons Styles

Use <p class="<strong>zt-info</strong>">Your info message goes here!</p></em>.</p> <p class="zt-help">Use <p class="<strong>zt-help</strong>">Your info message goes here!</p></em>.</p> <p class="zt-comment">Use <p class="<strong>zt-comment</strong>">Your info message goes here!</p></em>.</p> <p class="zt-accept">Use <p class="<strong>zt-accept</strong>">Your info message goes here!</p></em>.</p> <p class="zt-add">Use <p class="<strong>zt-add</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tip">Use <p class="<strong>zt-tip</strong>">Your info message goes here!</p></em>.</p> <p class="zt-warning">Use <p class="<strong>zt-warning</strong>">Your info message goes here!</p></em>.</p> <p class="zt-error">Use <p class="<strong>zt-error</strong>">Your info message goes here!</p></em>.</p> <p class="zt-email">Use <p class="<strong>zt-email</strong>">Your info message goes here!</p></em>.</p> <p class="zt-phone">Use <p class="<strong>zt-phone</strong>">Your info message goes here!</p></em>.</p> <p class="zt-mobile">Use <p class="<strong>zt-mobile</strong>">Your info message goes here!</p></em>.</p> <p class="zt-time">Use <p class="<strong>zt-time</strong>">Your info message goes here!</p></em>.</p> <p class="zt-world">Use <p class="<strong>zt-world</strong>">Your info message goes here!</p></em>.</p> <p class="zt-book">Use <p class="<strong>zt-book</strong>">Your info message goes here!</p></em>.</p> <p class="zt-stock">Use <p class="<strong>zt-stock</strong>">Your info message goes here!</p></em>.</p> <p class="zt-cart">Use <p class="<strong>zt-cart</strong>">Your info message goes here!</p></em>.</p> </div> <div class="zt-typo-col zt-typo-col2">

Use <p class="<strong>zt-date</strong>">Your info message goes here!</p></em>.</p> <p class="zt-key">Use <p class="<strong>zt-key</strong>">Your info message goes here!</p></em>.</p> <p class="zt-yes">Use <p class="<strong>zt-yes</strong>">Your info message goes here!</p></em>.</p> <p class="zt-no">Use <p class="<strong>zt-no</strong>">Your info message goes here!</p></em>.</p> <p class="zt-male">Use <p class="<strong>zt-male</strong>">Your info message goes here!</p></em>.</p> <p class="zt-female">Use <p class="<strong>zt-female</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-blue">Use <p class="<strong>zt-tag-blue</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-green">Use <p class="<strong>zt-tag-green</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-orange">Use <p class="<strong>zt-tag-orange</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-pink">Use <p class="<strong>zt-tag-pink</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-purple">Use <p class="<strong>zt-tag-purple</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-red">Use <p class="<strong>zt-tag-red</strong>">Your info message goes here!</p></em>.</p> <p class="zt-tag-yellow">Use <p class="<strong>zt-tag-yellow</strong>">Your info message goes here!</p></em>.</p> <p class="zt-green">Use <p class="<strong>zt-green</strong>">Your info message goes here!</p></em>.</p> <p class="zt-yellow">Use <p class="<strong>zt-yellow</strong>">Your info message goes here!</p></em>.</p> <p class="zt-red">Use <p class="<strong>zt-red</strong>">Your info message goes here!</p></em>.</p> </div> </div> <p id="order-list-styles" class="zt-typo-title">Order List Styles

Use <ol><li>...</li></ol>.
  1. Suspendisse hendrerit ante vel quam.
  2. Vestibulum nisl. Integer urna.
  3. Aenean hendrerit. Maecenas condimentum.
  4. 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!</strong></p> to form a clip note!</p> <p class="zt-box-warning">This is a sample clip note. Use <p class="box-warning">Your clip note goes here!</strong></p> to form a clip note!</p> <p class="zt-box-stickynote">This is a sample clip note. Use <p class="box-stickynote">Your clip note goes here!</strong></p> to form a clip note!</p> <p class="zt-box-download">This is a sample clip note. Use <p class="box-download">Your clip note goes here!</strong></p> to form a clip note!</p> <p class="zt-box-faq">This is a sample clip note. Use <p class="box-faq">Your clip note goes here!</strong></p> to form a clip note!</p> <p class="zt-box-flag">This is a sample clip note. Use <p class="box-flag">Your clip note goes here!</strong></p> to form a clip note!</p> <div class="clearfix" style="overflow:hidden;">

This is a sample block number.
Use <div class="<strong>zt-box1</strong>">Your content goes here!</div></em>!</div> <div class="zt-box2">This is a sample block number.
Use <div class="<strong>zt-box2</strong>">Your content goes here!</div></em>!</div> <div class="zt-box3">This is a sample block number.
Use <div class="<strong>zt-box2</strong>">Your content goes here!</div></em>!</div> </div> <div class="zt-typo-col zt-typo-col3">
This is a sample block number.
Use <div class="<strong>zt-box4</strong>">Your content goes here!</div></em>!</div> <div class="zt-box5">This is a sample block number.
Use <div class="<strong>zt-box5</strong>">Your content goes here!</div></em>!</div> <div class="zt-box6">This is a sample block number.
Use <div class="<strong>zt-box6</strong>">Your content goes here!</div></em>!</div> </div> <div class="zt-typo-col zt-typo-col3">
This is a sample block number.
Use <div class="<strong>zt-box7</strong>">Your content goes here!</div></em>!</div> <div class="zt-box8">This is a sample block number.
Use <div class="<strong>zt-box8</strong>">Your content goes here!</div></em>!</div> <div class="zt-box9">This is a sample block number.
Use <div class="<strong>zt-box9</strong>">Your content goes here!</div></em>!</div> </div> </div> <p id="bubble-styles" class="zt-typo-title">Bubble Styles

Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble1]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble2]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble3]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble4]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble5]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble6]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble7]
Praesent bibendum, lacus non dignissim ullamcorper, ligula nibh porttitor magna, id adipiscing eros neque id orci. Sed imperdiet ultrices ante, sed facilisis felis varius sit amet.
Author [Bubble8]

Blocknumber Styles

01 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

02 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

03 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

04 Mauris turpis quam, sodales vel aliquet sed, sodales vitae felis. Donec et nulla felis. Sed semper, massa non molestie vehicula, ipsum diam mattis dolor, ac accumsan nisl tellus vitae augue. Sed non venenatis turpis!

Blockquote Styles

Lorem ipsum dolor sit amet consectetuer interdum pulvinar orci Nunc elit.

Praesent augue libero, dignissim accumsan sagittis vitae, adipiscing non erat. Vivamus congue diam vel justo ultricies nec vestibulum lacus varius. Nullam tellus urna, scelerisque in laoreet quis, viverra lacinia neque.

Curabitur pretium, nunc dignissim dapibus ultricies, tortor diam tempus erat, ut gravida sem enim vitae nunc. Fusce libero justo, sodales sed vulputate sodales, euismod in lacus. Suspendisse eget magna a ante laoreet placerat ac id purus. In gravida, nibh a luctus faucibus, nunc neque pellentesque ipsum, ac cursus elit neque sit amet urna.

Lorem ipsum dolor sit amet consectetuer interdum pulvinar orci Nunc elit.

Praesent augue libero, dignissim accumsan sagittis vitae, adipiscing non erat. Vivamus congue diam vel justo ultricies nec vestibulum lacus varius. Nullam tellus urna, scelerisque in laoreet quis, viverra lacinia neque.

Curabitur pretium, nunc dignissim dapibus ultricies, tortor diam tempus erat, ut gravida sem enim vitae nunc. Fusce libero justo, sodales sed vulputate sodales, euismod in lacus. Suspendisse eget magna a ante laoreet placerat ac id purus. In gravida, nibh a luctus faucibus, nunc neque pellentesque ipsum, ac cursus elit neque sit amet urna.

Dropcap Styles

Example: <p class="<strong>dropcap</strong>">This is the text with dropcap symbol </p>.</em></p> <p class="dropcap">This is special drop cap symbol styling for magazine / newspaper text paragraph. Vestibulum elementum consectetur nunc sed auctor. Phasellus sed nulla enim, vitae dignissim augue. Cras nunc ligula, vestibulum ac ornare et, tempus interdum odio. Morbi quam dui, hendrerit vitae ornare quis, tempor ut arcu. Donec sed quam non magna fringilla iaculis non ac arcu. Nunc vel eros sed massa fringilla accumsan nec nec orci. Integer quis lacinia sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Praesent adipiscing diam sed quam scelerisque scelerisque. Nullam tristique, tortor id laoreet dignissim, arcu velit porttitor sem, scelerisque tincidunt mauris metus vel mi. Praesent quis nunc tortor, dapibus tincidunt eros. Vestibulum eleifend, neque adipiscing molestie posuere, nisi odio faucibus ipsum, a pretium eros ante fringilla dui. Aliquam rhoncus nunc sed est porttitor eget varius erat suscipit. Donec dignissim convallis urna, et volutpat libero fringilla non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dictum rutrum posuere. Aenean semper porttitor felis quis suscipit. Vivamus et dolor et dolor sodales lacinia.

Legend Styles

Legend style

[legend1] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Legend style

[legend2 zt-dotted] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Legend style

[legend3 zt-rounded] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum.

Legend style

[legend4 zt-dotted zt-rounded] Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

Table Styles

Example: <table class="<strong>plainrows</strong>"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table></em></p> <table class="plainrows" border="0" width="100%" summary="Plain Rows style"> Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5 Table footer Footer data Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Example: <table class="<strong>colorstripes</strong>"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table></em></p> <table class="colorstripes" border="0" width="100%" summary="Color Stripes style"> Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5 Table footer Footer data Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Example: <table class="<strong>greystripes</strong>"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table></em></p> <table class="greystripes" border="0" width="100%" summary="Grey Stripes style"> Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5 Table footer Footer data Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Default Blue Green