Heading1 (h1) looks like this

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.

Heading2 (h2) looks like this

Heading3 (h3) looks like this

Heading4 (h4) looks like this

Heading5 (h5) looks like this

<pre> or <div class="code">

To display note use: Sample of your note !

To display pin note use :Sample of your pin note !

To display clip note use:Sample of your clip note

To display download note use:Sample of your download note

Text Formats

This is text with <span class="text-primary">primary color</span>

This is text with primary color

This is text with <span class="text-secondary">secondary color</span>

This is text with secondary color

This is <strong>strong text</strong>

This is strong text

This is <em>emphasized text</em>

This is emphasized text

This is <u>underlined text</u>

This is underlined text

This is <s>strikethrough text</s>

This is ~~strikethrough text~~

This is <a>link text</a>

This is link text

This is <small>small text</small>

This is small text

This is <sup>superscript text</sup>

This is ^{superscript text}

This is <sub>subscript text</sub>

This is _{subscript text}

This is <samp>sample text</samp>

This is sample text

This is <var>variable text</var>

This is variable text

This is <kbd>keyboard text</kbd>

This is keyboard text

This is <abbr>abbreviation text</abbr>

This is abbreviation text

This is <del>deleted text</del>

This is ~~deleted text~~

This is <ins>inserted text</ins>

This is inserted text

This is <mark>marked text</mark>

This is marked text

Ordered List

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="tick"

<ul class="tick"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="star"

<ul class="star"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="plus"

<ul class="plus"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="arrow"

<ul class="arrow"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="chevron"

<ul class="chevron"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Un-Ordered List witch class="dot"

<ul class="dot"><li>Your list item goes here!</li></ul>

Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Horizontal Rules

<hr>

Blockquote

<blockquote><p>Your list item goes here!</p></blockquote>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Emphasis Tags

<em class="highlight black">your text</em>

An emphasis tag that allows you to highlight some text in black.

<em class="highlight blue">your text</em>

An emphasis tag that allows you to highlight some text in blue.

<em class="highlight red">your text</em>

An emphasis tag that allows you to highlight some text in red.

<em class="highlight green">your text</em>

An emphasis tag that allows you to highlight some text in green.

<em class="highlight yellow">your text</em>

An emphasis tag that allows you to highlight some text in yellow.

Image Highlight

<p class="image-highlight"><img src="/demo/0170/images/yourimage.jpg"/></p>

image-hightlight

Image Box-Shadow

<p class="box-shadow"><img src="/demo/0170/images/yourimage.jpg"/></p>

Columns

<div class="columns-2"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Morbi interdum mollis sapien.</p></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Morbi interdum mollis sapien.

<div class="columns-3"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Morbi interdum mollis sapien.</p></div>

<div class="columns-4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Morbi interdum mollis sapien.</p></div>

Typography