You are here / About Us  /  Skin  /  Typography

Headings and other elements styles

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Other elements styling

  • This is abbreviation <abbr> </abbr>
  • This is strong <strong> </strong>
  • This is emphasis <em> </em>
  • This is bold text <b> </b>
  • This is italic text <i> </i>
  • This is cite <cite> </cite>
  • This is small text <small> </small>
  • This is deleted text <del> </del>
  • This is inserted text <ins> </ins>
  • This is defining instance <dfn> </dfn>
  • This is user input <kbd> </kbd>
  • This is sample output <samp> </samp>
  • This is “inline quotation” <q> </q>
  • This is superscript <sup> </sup>
  • This is subscript <sub> </sub>
  • This is a variable <var> </var>

Lists Style

Lists Style

Social Icons

<div class="Social-Links">  <a target="_blank" href="#" class="icoFacebook"></a>  <a target="_blank" href="#" class="icoTwitter"></a>  <a target="_blank" href="#" class="icoMySpace"></a>  <a target="_blank" href="#" class="icoStumbleUpon"></a>  <a target="_blank" href="#" class="icoDigg"></a>  <a target="_blank" href="#" class="icoFlickr"></a>  <a target="_blank" href="#" class="icoIN"></a>  <a target="_blank" href="#" class="icoLinkedIn"></a>  <a target="_blank" href="#" class="icoYouTube"></a>  <a target="_blank" href="#" class="icoDelicious"></a>  <a target="_blank" href="#" class="icoBlogger"></a>  <a target="_blank" href="#" class="icoRSS"></a>  <a target="_blank" href="#" class="icoEmail"></a>  <a target="_blank" href="#" class="icoTumblr"></a>  <a target="_blank" href="#" class="icoFourSquare"></a>  <a target="_blank" href="#" class="icoReddit"></a>  <a target="_blank" href="#" class="icoVimeo"></a>  <a target="_blank" href="#" class="icoWordPress"></a>  <a target="_blank" href="#" class="icoBebo"></a>  <a target="_blank" href="#" class="icoTwitter2"></a>  <a target="_blank" href="#" class="icodnnskin"></a>  </div>

Blockquotes

"Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat."

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat.

Mark Johnson
President and CEO, R&D Services

Table

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

Column 01 Column 02 Column 03 Column 04
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development
Lorem ipsum dolor commodo consequat nulla pariatur development

<table width="100%" cellspacing="0" cellpadding="0" class="black_table radius4">
<thead>
<tr>
<th style="width: 25%;">Column 01</th>
<th style="width: 25%;">Column 02</th>
<th style="width: 25%;">Column 03</th>
<th style="width: 25%;">Column 04</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor</td>
<td>commodo consequat</td>
<td>nulla pariatur</td>
<td>development</td>
</tr>
</tbody>
</table>

Buttons

Add desired class to the <a> tag (<a href="" > Button Text </a>)

Default <a class="btn" href="#"> Default </a> small <a class="btn small" href="#"> Small </a> medium <a class="btn medium" href="#"> Medium </a> large button <a class="btn large" href="#"> Large Button </a> << 1 2 3 4 ... >> <a class="btn" href="#">&lt;&lt; </a> <a class="btn" href="#">1 </a> <a class="btn" href="#">2 </a> <a class="btn" href="#">3</a> <a class="btn" href="#">4 </a> <a class="btn" href="#">... </a&tt;<a class="btn" href="#">&gt;&gt;</a>
Default Color <a class="btn dcolor bgcolor" href="#"> Default </a> Success <a class="btn success" href="#"> Success </a> Warning <a class="btn warning" href="#"> Warning </a> Danger <a class="btn danger" href="#"> Danger </a> Info <a class="btn info" href="#"> Info </a>

Add desired class to the <a> tag with <span> tag inside (<a href="" ><span></span> Button Text </a>)

<a class="btn sign-in" href="#"> <span></span>Sign in </a> Sign out <a class="btn sign-out" href="#"> <span></span>Sign out </a> Sitemap <a class="btn site-map" href="#"> <span></span>Sitemap </a> Comment <a class="btn comment" href="#"> <span></span>Comment </a> Print <a class="btn print" href="#"> <span></span>Print </a> Icon Button <a class="btn add" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn correct" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn search" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn lock" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn refesh" href="#"> <span></span>Icon Button </a>
E-Mail <a class="btn info mail" href="#"> <span></span>E-Mail </a> Download <a class="btn success download" href="#"> <span></span>Download </a> Phone <a class="btn warning phone" href="#"> <span></span>Phone </a> Star <a class="btn danger star" href="#"> <span></span>Star </a> Calendar <a class="btn success calendar" href="#"> <span></span>Calendar </a> Icon Button <a class="btn paypal" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn setting" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn idea" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn camera" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn tel" href="#"> <span></span>Icon Button </a>

Live fluid grid example

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.

1
1
1
1
1
1
1
1
1
1
1
1

4
4
4

4
8

6
6

12

Basic fluid grid HTML

Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and fluid grids.

<div class="layoutcontainer"> <div class="span4">...</div> <div class="span8">...</div> </div>

Module Content Layout

Two Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="span6">Lorem ipsum dolor...</div>
<div class="span6">Lorem ipsum dolor...</div>
<div class="clr"></div></div>

Three Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="span4">Lorem ipsum dolor...</div>
<div class="span4">Lorem ipsum dolor...</div>
<div class="span4">Lorem ipsum dolor...</div>
<div class="clr"></div>
</div>

Four Columns Layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<div class="layoutcontainer">
<div class="span3">Lorem ipsum dolor...</div>
<div class="span3">Lorem ipsum dolor...</div>
<div class="span3">Lorem ipsum dolor...</div>
<div class="span3">Lorem ipsum dolor...</div>
<div class="clr"></div>
</div>

Divider

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. Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

[hr style="1,2,3,4" margin="40px 0 40px 0"]

Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

[hr style="2"]

Suspendisse mauris. Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Integer adipiscing risus a sem. Nullam quis massa sit amet nibh viverra malesuada. Nunc sem lacus, accumsan quis, faucibus non, congue vel, arcu. Ut scelerisque hendrerit tellus. Integer sagittis. Vivamus a mauris eget arcu gravida tristique. Nunc iaculis mi in ante. Vivamus imperdiet nibh feugiat est.

[hr style="3"]

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.

[hr style="4"]

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Integer eu magna sit amet metus fermentum posuere. Morbi sit amet nulla sed dolor elementum imperdiet. Quisque fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque adipiscing eros ut libero. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.