Notice Styles

And bit more icons... icon-9 icon-10

You may combinate the icons and colors to get preferable design

List Styles - Bullets

Below is a regular unordered list. To use this style create a list in the following format:

• To use this style create a list in the following format: <ul class="bullet-1"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bullet-2"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bullet-3"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bullet-4"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bullet-5"><li>...</li><li>...</li>...</ul>

List Styles - Numbers

Below is a regular ordered list. To use this style create a list in the following format:

<ol class="number">
   <li>This is one
      <ol>
         <li>This is sub-one</li>
         <li>This is sub-two</li>
         <li>This is sub-three</li>
      </ol>
   </li>
   <li>This is two
      <ol>
         <li>This is sub-one</li>
         <li>This is sub-two</li>
         <li>This is sub-three</li>
      </ol>
   </li>
   <li>This is three
      <ol>
         <li>This is sub-one</li>
         <li>This is sub-two</li>
         <li>This is sub-three</li>
      </ol>
   </li>
</ol>

1. This is one
   1. This is sub-one
   2. This is sub-two
   3. This is sub-three
2. This is two
   1. This is sub-one
   2. This is sub-two
   3. This is sub-three
3. This is three
   1. This is sub-one
   2. This is sub-two
   3. This is sub-three

List Styles - Big bullets

Below is a regular unordered list. To use this style create a list in the following format:

• To use this style create a list in the following format: <ul class="bigbullet-1"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bigbullet-2"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bigbullet-3"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bigbullet-4"><li>...</li><li>...</li>...</ul>

• To use this style create a list in the following format: <ul class="bigbullet-5"><li>...</li><li>...</li>...</ul>

Marker Styles

• This span class allows you mark words or phrases. Use <span class="marker-yellow">...</span>
• This span class allows you mark words or phrases. Use <span class="marker-orange">...</span>
• This span class allows you mark words or phrases. Use <span class="marker-blue">...</span>
• This span class allows you mark words or phrases. Use <span class="marker-pink">...</span>
• This span class allows you mark words or phrases. Use <span class="marker-green">...</span>

Dropcups

This is base dropcup with class dropcup

<p class="dropcup">...</dropcup>

Westibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam augue elit; adipiscing sed sollicitudin sit amet, congue id diam. Phasellus nunc lacus, scelerisque eget ornare ut, tristique et augue. Fusce in lectus tempor leo lacinia imperdiet ut ut massa! Fusce vitae arcu et ante rhoncus consectetur. Duis elementum ante nec nisl condimentum sit amet varius velit bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet. Westibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam augue elit; adipiscing sed sollicitudin sit amet, congue id diam. Phasellus nunc lacus, scelerisque eget ornare ut, tristique et augue. Fusce in lectus tempor leo lacinia imperdiet ut ut massa! Fusce vitae arcu et ante rhoncus consectetur. Duis elementum ante nec nisl condimentum sit amet varius velit bibendum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

And technique that allows use font replacements for dropcups

<p><span class="drop-perfo">E</span>uismod habitant morbi tristique senectus...</dropcup>

Euismod habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare ligula nec arcu hendrerit vel aliquet nisl. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-chinese-takeaway">M</span>auris ligula nec arcu hendrerit habitant morbi...</dropcup>

Mauris ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel aliquet nisl euismod. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-seven-swordsmen">I</span>ipsum aliquet nisl euismod ligula nec arcu hendrerit...</dropcup>

Ipsum aliquet nisl euismod ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-starcraft">G</span>oleus liquet nisl euismod ligula nec arcu hendrerit...</dropcup>

Goleus liquet nisl euismod ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-vis-a-vis">H</span>omos nisl euismod ligula nec arcu hendrerit...</dropcup>

Homos nisl euismod ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-elmar">T</span>ristique liquet nisl euismod ligula nec arcu hendrerit...</dropcup>

Tristique liquet nisl euismod ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

<p><span class="drop-gondrini">Y</span>anny euismod ligula nec arcu hendrerit...</dropcup>

Yanny euismod ligula nec arcu hendrerit habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec bibendum, mi quis pulvinar dignissim; sem nisi pretium diam, et lacinia odio justo vitae justo. Integer aliquam pharetra mauris ac pretium. Fusce commodo mattis diam, at egestas quam pretium sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ornare vel. Nullam scelerisque elementum velit eu sollicitudin. Fusce tortor tortor, porta ac porta porta amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisl felis, sollicitudin vel ullamcorper quis, lacinia amet.

Blockquotes

<blockquote>This is blockquote tag with no class...</blockquote>

This is blockquote tag with no class

Etiam imperdiet aliquet libero vitae interdum. Praesent vehicula, nisi quis convallis eleifend; nunc eros venenatis odio, nec ullamcorper enim elit quis nisl. Nullam dictum massa a neque pretium tempor.

<blockquote class="quote-2">This is blockquote tag with class quote-2...</blockquote>

This is blockquote tag with class quote-2

Praesent velit erat, pharetra et suscipit euismod; dictum eget sem. Curabitur pellentesque dignissim lectus at fringilla. Donec sed lobortis orci.

<blockquote class="quote-3">This is blockquote tag with class quote-3...</blockquote>

This is blockquote tag with class quote-3

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed laoreet, sapien in vestibulum sagittis, neque urna commodo tellus, sed rutrum eros lectus at magna