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">

#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

Order List Styles

Bullet Styles

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!

Bubble Styles

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

Dropcap Styles

Example: <p class="dropcap">This is the text with dropcap symbol </p>.

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

Table Styles

Example: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Example: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Example: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>