^

Accordion

  • Example one
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
  • Example two
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
  • Example three
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.

Base accordion without colors

  • Example one
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
  • Example two
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
  • Example three
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. 
<div class="box-accordion">
  <ul>
    <li>
      <a href="#" data-fn="accordion" data-open="accordion-one" class="b-peter-river c-clouds">
      Example one
      </a>
      <div id="accordion-one" class="accordion b-clouds accordion-open">
        // content here
      </div>
    </li>
    <li>
      <a href="#" data-fn="accordion" data-open="accordion-two" class="b-peter-river c-clouds">
      Example two
      </a>
      <div id="accordion-two" class="accordion b-clouds">
        // content here
      </div>
    </li>
    <li>
      <a href="#" data-fn="accordion" data-open="accordion-three" class="b-peter-river c-clouds">
        Example three
      </a>
      <div id="accordion-three" class="accordion b-clouds">
        // content here
      </div>
    </li>
  </ul>
</div>

Tabs

Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem.
Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi.

Base tabs without colors

Samplre one dolor sit amet, consectetur adipisicing elit. In nihil voluptas expedita dolores quas? Nemo libero quidem nesciunt corrupti dolorem. Omnis itaque nam porro aliquam cupiditate iste necessitatibus dicta perferendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quia ab quo delectus possimus tempore debitis cumque excepturi a voluptatibus fugiat harum in consequuntur nihil recusandae laudantium perferendis nostrum voluptatem.
Samplre two ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus vero quisquam voluptatem non modi a quia ipsam nemo saepe neque dolorum eveniet alias ipsa maxime blanditiis molestiae placeat. Doloremque vel!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi pariatur minus aperiam illo culpa possimus saepe corporis ex rerum natus cupiditate debitis incidunt ab vitae modi maiores at atque nisi. 
<div class="tabs">
  <ul>
    <li class="tab-active">
      <a href="#"  class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-one">
        Open One
      </a>
    </li>
    <li>
      <a href="#" class="b-peter-river c-clouds"  data-fn="tabs" data-open="tab-two">
        Open Two
      </a>
    </li>
    <li>
      <a href="#" class="b-peter-river c-clouds" data-fn="tabs" data-open="tab-three">
        Open Three
      </a>
    </li>
  </ul>
  <div class="tab b-clouds tab-open" id="tab-one" >
    // content here
  </div>
  <div class="tab b-clouds" id="tab-two" >
    // content here
  </div>
  <div class="tab b-clouds" id="tab-three" >
    // content here
  </div>
</div>

Modal

Modal

Html code

  // link
  <a class="btn" href="#" title=" Example link" data-fn="text" data-get="Html text here with ' '  "h2>
    Download
  </a>

  // Modal with custom colors
  <div class="overlay b-midnight-blue">
    <div class="modal b-wet-asphalt c-clouds"></div>
  </div>

Buttons

Colors

Html code

<button class="btn c-clouds b-turquoise">turquoise</button>
<button class="btn c-clouds b-green-sea">green-sea</button>
<button class="btn c-clouds b-emerland">emerland</button>
<button class="btn c-clouds b-nephritis">nephritis</button>
<button class="btn c-clouds b-peter-river">peter-river</button>
<button class="btn c-clouds b-belize-hole">belize-hole</button>
<button class="btn c-clouds b-amethyst">amethyst</button>
<button class="btn c-clouds b-wisteria">wisteria</button>
<button class="btn c-clouds b-wet-asphalt">wet-asphalt</button>
<button class="btn c-clouds b-midnight-blue">midnight-blue</button>
<button class="btn c-clouds b-sun-flower">sun-flower</button>
<button class="btn c-clouds b-orange">orange</button>
<button class="btn c-clouds b-carrot">carrot</button>
<button class="btn c-clouds b-pumpkin">pumpkin</button>
<button class="btn c-clouds b-alizarin">alizarin</button>
<button class="btn c-clouds b-pomegranate">pomegranate</button>
<button class="btn c-midnight-blue b-clouds">clouds</button>
<button class="btn c-clouds b-silver">silver</button>

buttons

Html code

<button class="btn">Simple button</button>
<button class="btn btn-disabled">Disabled button</button>
<button class="btn btn-active">Active button</button>
<button class="btn b-peter-river c-clouds">Color button</button>
<button class="btn btn-block">Block button</button>

Forms

Inline forms

Login

Html code

<form class="form c-clouds b-peter-river">
  <fieldset>
    <legend>A compact inline form</legend>

    <input type="email" class="b-clouds c-peter-river" placeholder="Email">
    <input type="password"  class="b-clouds c-peter-river" placeholder="Password">

    <label for="remember">
        <input id="remember" type="checkbox"> Remember me </label>

    <button type="submit" class="btn b-peter-river c-clouds">Sign in</button>
  </fieldset>
</form>

Aligned Form

Html code

<form class="form form-aligned">
  <fieldset>
    <div class="control-group">
        <label for="name">Username</label>
        <input id="name" type="text"  class="c-peter-river b-clouds" placeholder="Username">
    </div>

    <div class="control-group">
        <label for="password">Password</label>
        <input id="password" type="password" class="c-peter-river b-clouds" placeholder="Password">
    </div>

    <div class="control-group">
        <label for="email">Email Address</label>
        <input id="email" type="email" class="c-peter-river b-clouds input-1-3" placeholder="Email Address">
    </div>

    <div class="control-group">
        <label for="foo">Textarea</label>
        <textarea id="foo" type="text" class="c-peter-river b-clouds input-1-2" placeholder="Enter something here..."></textarea>
    </div>

    <div class="controls">                    
      <label for="cb" class="checkbox">
        <input id="cb" type="checkbox"> 
        I've read the terms and conditions 
      </label>

        <button type="submit" class="btn b-peter-river c-clouds">Submit</button>
    </div>
  </fieldset>
</form>

Menus

Vertical Menu

Html code

<div  class="menu menu-open b-midnight-blue c-clouds">
    <ul>
        <li class="menu-heading">Biru world</li>
        <li class="menu-active"><a href="#">Home</a></li>
        <li><a href="#">Components</a></li>
        <li><a href="#">Grids</a></li>
        <li><a href="#">Javascript</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Horizontal Menu

Biru world

Html code

<div class="menu menu-open menu-horizontal">
    <a href="#" class="menu-heading">Biru world</a>
    <ul>
        <li><a href="#">Home</a></li>
        <li class="menu-active"><a href="#">Components</a></li>
        <li><a href="#">Grids</a></li>
        <li class="menu-disabled"><a href="#">Disabled</a></li>
    </ul>
</div>

Tables

Basic

# Css Html Javascript
1 Android IOS Chrome
2 Android IOS Chrome
3 Android IOS Chrome

Html code

<table class="table">
    <thead>
        <tr>
          <th>#</th><th>Css</th><th>Html</th><th>Javascript</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
    </tbody>
</table>

Colors

# Css Html Javascript
1 Android IOS Chrome
2 Android IOS Chrome
3 Android IOS Chrome

Html code

<table class="table c-peter-river b-clouds sh">
    <thead class="b-peter-river c-clouds">
        <tr>
          <th>#</th><th>Css</th><th>Html</th><th>Javascript</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
        <tr>
          <td>1</td><td>Android</td><td>IOS</td><td>Chrome</td>
        </tr>
    </tbody>
</table>

Copyright © 2013   :::   Made with   ♥