Small Buttons

<a href="#" class="rd-button small white">Small</a>
<a href="#" class="rd-button small grey">Small</a>
<a href="#" class="rd-button small light-green">Small</a>
<a href="#" class="rd-button small orange">Small</a>
<a href="#" class="rd-button small blue">Small</a>
<a href="#" class="rd-button small green">Small</a>
<a href="#" class="rd-button small yellow">Small</a>

Medium Buttons

<a href="#" class="rd-button medium white">Medium</a>
<a href="#" class="rd-button medium grey">Medium</a>
<a href="#" class="rd-button medium light-green">Medium</a>
<a href="#" class="rd-button medium orange">Medium</a>
<a href="#" class="rd-button medium blue">Medium</a>
<a href="#" class="rd-button medium green">Medium</a>
<a href="#" class="rd-button medium yellow">Medium</a>

Large Buttons

<a href="#" class="rd-button large white">Large</a>
<a href="#" class="rd-button large grey">Large</a>
<a href="#" class="rd-button large light-green">Large</a>
<a href="#" class="rd-button large orange">Large</a>
<a href="#" class="rd-button large blue">Large</a>
<a href="#" class="rd-button large green">Large</a>
<a href="#" class="rd-button large yellow">Large</a>

Outline Buttons

<a href="#" class="rd-button ob medium o_white">Outline</a>
<a href="#" class="rd-button ob medium o_grey">Outline</a>
<a href="#" class="rd-button ob medium o_light-green">Outline</a>
<a href="#" class="rd-button ob medium o_orange">Outline</a>
<a href="#" class="rd-button ob medium o_blue">Outline</a>
<a href="#" class="rd-button ob medium o_green">Outline</a>
<a href="#" class="rd-button ob medium o_yellow">Outline</a>

Pricing Table

Heading

$20/month

  • 10 Gb Storage
  • 10 projects
  • 24/7
  • unlimited
<div class="span4 pricing_table2_second pricing_table2_third mb text-center">
 <div class="pricing_table2_second_heading">
  <h1>Heading</h1>
  <p>$20/month</p>
 </div>
 <ul>
  <li>10 Gb Storage</li>
  <li>10 projects</li>
  <li>24/7</li>
  <li class="right good icon-checkmark"></li>
  <li>unlimited</li>
  <li class="bad icon-cross"></li>
 </ul>
 <div class="span12 first text-center">
  <a class="rd-button pricing_table_button" href="#">Lets go</a>
 </div>
</div>

Pretty Lists


Style 1 "list_style1"

  • Adipiscing
  • Nonummy nibh
  • Tincidunt
  • Dolore magna
  • Aliquam erat
  • volutpat.
<div class="span3 first mb list_style list_style1">
 <ul>
     <li><span class="icon-checkmark"></span>Adipiscing</li>
     <li><span class="icon-checkmark"></span>Nonummy nibh</li>
     <li><span class="icon-checkmark"></span>Tincidunt</li>
     <li><span class="icon-checkmark"></span>Dolore magna</li>
     <li><span class="icon-checkmark"></span>Aliquam erat</li>
     <li><span class="icon-checkmark"></span>volutpat.</li>
 </ul>
</div>


Style 2 "list_style2"


  • Adipiscing
  • Nonummy nibh
  • Tincidunt
  • Dolore magna
  • Aliquam erat
  • volutpat.
<div class="span3 mb list_style list_style2">
<ul>
    <li>Adipiscing</li>
    <li>Nonummy nibh</li>
    <li>Tincidunt</li>
    <li>Dolore magna</li>
    <li>Aliquam erat</li>
    <li>volutpat.</li>
</ul>
</div>


Style 3 "list_style3"


  • Adipiscing
  • Nonummy nibh
  • Tincidunt
  • Dolore magna
  • Aliquam erat
  • volutpat.
<div class="span3 mb list_style list_style3">
 <ul>
     <li>Adipiscing</li>
     <li>Nonummy nibh</li>
     <li>Tincidunt</li>
     <li>Dolore magna</li>
     <li>Aliquam erat</li>
     <li>volutpat.</li>
 </ul>
</div>


Style 4 "list_style4"


  • Adipiscing
  • Nonummy nibh
  • Tincidunt
  • Dolore magna
  • Aliquam erat
  • volutpat.
<div class="span3 first mb list_style list_style4">
 <ul>
    <li><span class="icon-mobile right i-blue"></span>Adipiscing</li>
    <li><span class="icon-sharable right i-orange"></span>Nonummy nibh</li>
    <li><spanÏ class="icon-megaphone right i-red"></span>Tincidunt</li>
    <li><span class="icon-feather"></span>Dolore magna</li>
    <li><span class="icon-stackoverflow"></span>Aliquam erat</li>
    <li><span class="icon-foursquare-2"></span>volutpat.</li>
 </ul>
</div>