< Back
You are here » Typography

Buttons

Add desired class to the <a> tag (<a href="" > Button Text </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>
Default <a class="btn" 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> Icon Button <a class="btn lock" href="#"> <span></span>Icon Button </a> Icon Button <a class="btn refesh" 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>

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

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>

List Style

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

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>

Table Style

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>

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="panes">
<div class="fleft w49">Lorem ipsum dolor...</div>
<div class="fright w49">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="panes">
<div class="fleft TAColPane">Lorem ipsum dolor...</div>
<div class="fleft TBColPane">Lorem ipsum dolor...</div>
<div class="fright TCColPane">Lorem ipsum dolor...</div>
<div class="clr"></div>
</div>