HTML Examples

HTML Typography

This tutorial page features all the typography available with the template, showcasing them in HTML form. If you wish to use the RokCandy format, which is WYSIWYG friendly, please go to the RokCandy Typography page.

This page shows all of the typography styles and settings in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Typography Tutorial.

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important"><span class="important-title">Sample Title</span>...some content...</div>

This is a sample of the 'attention' style. Use this style to denote very important information to your users. To use this use the following html: <div class="attention"><div class="typo-icon">....</div></div>

This is a sample of the 'notice' style. Use this style to denote very important information to your users. To use this use the following html: <div class="notice"><div class="typo-icon">....</div></div>

This is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the following html: <div class="alert"><div class="typo-icon">....</div></div>

This is a sample of the 'download' style. Use this style to denote very important information to your users. To use this use the following html: <div class="download"><div class="typo-icon">....</div></div>

This is a sample of the 'approved' style. Use this style to denote very important information to your users. To use this use the following html: <div class="approved"><div class="typo-icon">....</div></div>

This is a sample of the 'media' style. Use this style to denote very important information to your users. To use this use the following html: <div class="media"><div class="typo-icon">....</div></div>

This is a sample of the 'note' style. Use this style to denote very important information to your users. To use this use the following html: <div class="note"><div class="typo-icon">....</div></div>

This is a sample of the 'cart' style. Use this style to denote very important information to your users. To use this use the following html: <div class="cart"><div class="typo-icon">....</div></div>

This is a sample of the 'camera' style. Use this style to denote very important information to your users. To use this use the following html: <div class="camera"><div class="typo-icon">....</div></div>

This is a sample of the 'doc' style. Use this style to denote very important information to your users. To use this use the following html: <div class="doc"><div class="typo-icon">....</div></div>