• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
  • View the code
    Simple Box
    <div class="box">
        <div class="content">Simple Box</div>
    </div>
  • View the code
    Simple Rounded Box
    <div class="box rounded">
        <div class="content">Simple Rounded Box</div>
    </div>
  • View the code
    Simple Box with Border and Box-Shadow
     
    <div class="box border box-shadow">
        <div class="content">Simple Box with Border and Box-Shadow</div>
    </div>
    • Generic
    • Showcase
    • View the code
      Header
      Box with Header
       
      <div class="box">
          <header>Header</header>
          <div class="content">Box with Header</div>
      </div>
    • View the code
      Useful Links
      • Google
      • Facebook
      • Twitter
      • Pinterest
      • Tumblr
       
      <div class="box useful-links">
          <header>Useful Links</header>
          <div class="content">
              <ul class="menu-list vertical">
                  <li class="item">
                      <a title="Visit Google" class="link" href="http://www.google.com/">Google <span class="icon right"></span></a>
                  </li>
                  <li class="item">
                      <a title="Visit Facebook" class="link" href="http://www.facebook.com/">Facebook <span class="icon right"></span></a>
                  </li>
                  <li class="item">
                      <a title="Visit Twitter" class="link" href="http://www.twitter.com/">Twitter <span class="icon right"></span></a>
                  </li>
                  <li class="item">
                      <a title="Visit Pinterest" class="link" href="http://www.pinterest.com/">Pinterest <span class="icon right"></span></a>
                  </li>
                  <li class="item">
                      <a title="Visit Tumblr" class="link" href="http://www.tumblr.com/">Tumblr <span class="icon right"></span></a>
                  </li>
              </ul>
          </div>
      </div>
  • View the code
    Box with Footer
    Footer
     
    <div class="box">
        <div class="content">Box with Footer</div>
        <footer>Footer</footer>
    </div>
  • View the code
    Header
    Box with Header and Footer
    Footer
     
    <div class="box">
        <header>Header</header>
        <div class="content">Box with Header and Footer</div>
        <footer>Footer</footer>
    </div>
  • View the code
    Left Floated Box
     
    <div class="box left">
        <div class="content">Left Floated Box</div>
    </div>
  • View the code
    Right Floated Box
     
    <div class="box right">
        <div class="content">Right Floated Box</div>
    </div>
    • Generic
    • Showcase
    • View the code this component uses the slidings function which you can find in the js/main.js file from your framework root directory
      Sliding Box
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.
       
      <div class="box slide">
          <header>Sliding Box <span class="icon left trigger"></span></header>
          <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.</div>
      </div>
    • View the code

      Account

      Profile Settings
      <h4>Account</h4>
      <div class="box slide">
          <header>Profile Settings <span class="icon left trigger"></span></header>
          <div class="content">
              <form class="form-validate" action="your-script" method="POST">
                  <fieldset>
                      <div class="group">
                          <label for="name">Name</label>
                          <input type="text" class="input text" name="name" placeholder="name" id="name" required />
                      </div>
                      <div class="group">
                          <label for="surname">Surname</label>
                          <input type="text" class="input text" name="surname" placeholder="surname" id="surname" />
                      </div>
                      <div class="group input-wrapper multiple">
                          <label>Profile Photo</label>
                          <input type="text" class="input text" name="text" value="Choose a file" disabled="disabled" />
                          <label for="file-input" class="button file">Profile Photo <span class="icon right"></span></label><input type="file" class="input" name="file" id="file-input" />
                      </div>
                  </fieldset>
                  <button type="submit" class="input button">save changes</button>
              </form>
          </div>
      </div>
  • View the code this component uses the slidings function which you can find in the js/main.js file from your framework root directory
    Active Sliding Box
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.
     
    <div class="box slide active">
        <header>Active Sliding Box <span class="icon left trigger"></span></header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.</div>
    </div>
  • View the code this component uses the slidings function which you can find in the js/main.js file from your framework root directory
    Sliding Box with Entire Bar as Trigger
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.
     
    <div class="box slide">
        <header class="trigger">Sliding Box with Entire Bar as Trigger <span class="icon left"></span></header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.</div>
    </div>
  • View the code this component uses the slidings function which you can find in the js/main.js file from your framework root directory
    Sliding Box with Trigger on the Right
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.
     
    <div class="box slide">
        <header>Sliding Box with Trigger on the Right <span class="icon right trigger"></span></header>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent felis diam, posuere ac lacus et, mattis euismod arcu. Curabitur venenatis at risus a pulvinar. Sed molestie tortor sed mi rhoncus hendrerit. Sed pulvinar quis eros nec dapibus. Nam fermentum scelerisque ipsum, ac feugiat dolor hendrerit fermentum. Phasellus eget lacinia felis, ultricies adipiscing erat. Integer porttitor nulla eget eros malesuada, sed placerat massa blandit.</div>
    </div>
    • Generic
    • Showcase
    • View the code this component uses the slidings function which you can find in the js/main.js file from your framework root directory
      Header
      Collapsable Box
       
      <div class="box collapsable active">
          <header>Header <a href="#" class="icon collapse right" title="Collapse"></a></header>
          <div class="content">Collapsable Box</div>
      </div>
    • View the code
      Account Created

      Your account has been created. You can now customise your Profile.

      <div class="box collapsable active">
          <header>Account Created <a href="#" class="icon collapse right" title="Collapse"></a></header>
          <div class="content">
              <p>Your account has been created. You can now customise your <a href="#" title="Go to Profile">Profile</a>.</p>
          </div>
      </div>
    • Generic
    • Showcase
    • View the code this component uses the slidings and boxBehavior functions which you can find in the js/main.js file from your framework root directory
      Header
      Closable Box
       
      <div class="box closable">
          <header>Header <a href="#" class="icon close right" title="Close"></a></header>
          <div class="content">Closable Box</div>
      </div>
    • View the code
      Account Created

      Your account has been created. You can now customise your Profile.

      <div class="box closable">
          <header>Account Created <a href="#" class="icon close right" title="Close"></a></header>
          <div class="content">
              <p>Your account has been created. You can now customise your <a href="#" title="Go to Profile">Profile</a>.</p>
          </div>
      </div>
    • Generic
    • Showcase
    • View the code

      UIKit Modal Box

      click here

      Title

      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="uikit-component">
          <a class="link" href="#uikit-modal" data-uk-modal>click here</a>
          <div id="uikit-modal" class="uk-modal">
              <div class="uk-modal-dialog">
                  <a class="uk-modal-close uk-close"></a>
                  <h1>Title</h1>
                  <p>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.</p>
              </div>
          </div>
      </div>
    • View the code
      Login into Account
      • recover password
      • signup
      <div class="uikit-component">
          <a href="#uikit-modal-example" data-uk-modal>Login into Account</a>
          <div id="uikit-modal-example" class="uk-modal">
              <div class="uk-modal-dialog">
                  <a class="uk-modal-close uk-close"></a>
                  <form class="form-validate" action="your-script" method="POST">
                      <fieldset>
                          <div class="group">
                              <label for="username">Username</label>
                              <input type="text" class="input text" name="username" placeholder="username" id="username2" required />
                          </div>
                          <div class="group">
                              <label for="password">Password</label>
                              <input type="password" class="input text" name="password" placeholder="password" id="password2" required />
                          </div>
                      </fieldset>
                      <button type="submit" class="input button">login</button>
                  </form>
                  <ul class="list-enumerated">
                      <li class="item">
                          <a title="Recover password" class="link" href="#">recover password</a>
                      </li>
                      <li class="item">
                          <a title="Create new user" class="link" href="#">signup</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  • View the code
    Left Ribbon
    Header
    Box with Left Ribbon
     
    <div class="box">
        <span class="ribbon-left">
            <span>Left Ribbon</span>
        </span>
        <header>Header</header>
        <div class="content">Box with Left Ribbon</div>
    </div>
    • Generic
    • Showcase
    • View the code
      Right Ribbon
      Header
      Box with Right Ribbon
       
      <div class="box">
          <span class="ribbon-right">
              <span>Right Ribbon</span>
          </span>
          <header>Header</header>
          <div class="content">Box with Right Ribbon</div>
      </div>
    • View the code
      20% OFF
      Dell Ultrabooks

      Image AltInteger ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus. Aenean lacinia nec mauris non venenatis. Nulla sollicitudin auctor imperdiet. Vivamus pellentesque tellus vitae tellus tincidunt bibendum.

      <div class="box">
          <span class="ribbon-right x-medium">
              <span>20% OFF</span>
          </span>
          <header>Dell Ultrabooks</header>
          <div class="content">
              <p><img width="320" height="283" alt="Image Alt" src="assets/img/samples/laptop.png" class="right" />Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
              <p>Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus. Aenean lacinia nec mauris non venenatis. Nulla sollicitudin auctor imperdiet. Vivamus pellentesque tellus vitae tellus tincidunt bibendum.</p>
          </div>
      </div>
  • View the code
    Ribbon
    Header
    Box with Ribbon
     
    <div class="box">
        <span class="ribbon">
            <span>Ribbon</span>
        </span>
        <header>Header</header>
        <div class="content">Box with Ribbon</div>
    </div>
  • View the code
    Simple Pane
    Content Goes In Here
     
    <div class="pane">
        <div class="content">
            <header>Simple Pane</header>
            <section>Content Goes In Here</section>
        </div>
    </div>
  • View the code
    Simple Left Pane
    Content Goes In Here
     
    <div class="pane left">
        <div class="content">
            <header>Simple Left Pane</header>
            <section>Content Goes In Here</section>
        </div>
    </div>
  • View the code
    Simple Right Pane
    Content Goes In Here
     
    <div class="pane right">
        <div class="content">
            <header>Simple Right Pane</header>
            <section>Content Goes In Here</section>
        </div>
    </div>
    • Generic
    • Showcase
    • View the code this component uses the docking function which you can find in the js/main.js file from your framework root directory

      Docking Pane

      Left Docking Pane
      Content Goes In Here
       
      <div class="pane left docking">
          <ul class="list controls">
              <li class="item docking">
                  <a class="link icon trigger" href="#" title="Dock this"><span class="icon"></span></a>
              </li>
          </ul>
          <div class="content">
              <header>Left Docking Pane</header>
              <section>Content Goes In Here</section>
          </div>
      </div>
    • View the code
      IT Products
      • Notebooks
      • Desktops
      • Components
      • Peripherals
      • Networking
      <div class="pane left docking menu-pane">
          <ul class="list controls">
              <li class="item docking">
                  <a class="link icon trigger" href="#" title="Dock this"><span class="icon"></span></a>
              </li>
          </ul>
          <div class="content">
              <header>IT Products</header>
              <section>
                  <ul class="menu-list vertical">
                      <li class="item notebooks">
                          <a title="Notebooks" class="link" href="#">Notebooks</a>
                      </li>
                      <li class="item desktops">
                          <a title="Desktops" class="link" href="#">Desktops</a>
                      </li>
                      <li class="item components">
                          <a title="Components" class="link" href="#">Components</a>
                      </li>
                      <li class="item peripherals">
                          <a title="Peripherals" class="link" href="#">Peripherals</a>
                      </li>
                      <li class="item networking">
                          <a title="Networking" class="link" href="#">Networking</a>
                      </li>
                  </ul>
              </section>
          </div>
      </div>
  • View the code
    Flyer Text Goes In Here
     
    <div class="flyer box">
        <span class="content"><span class="icon big right"></span>Flyer Text Goes In Here</span>
    </div>
  • View the code
    Flyer Text Goes In Here
     
    <div class="flyer box">
        <a href="#" class="content" title="Actioned Flyer"><span class="icon big right"></span>Flyer Text Goes In Here</a>
    </div>
  • View the code
    Colored Flyer Text Goes In Here
     
    <div class="flyer box">
        <a href="#" class="content background-purple" title="Colored Actioned Flyer"><span class="icon big right"></span>Colored Flyer Text Goes In Here</a>
    </div>
  • View the code
    Style-Inverted Flyer Text Goes In Here
     
    <div class="flyer box invert">
        <a href="#" class="content" title="Style-Inverted Actioned Flyer"><span class="icon big right"></span>Style-Inverted Flyer Text Goes In Here</a>
    </div>
    • Generic
    • Showcase
    • View the code
      Medium Size Flyer With Action Button Text Goes In Here Action Button
       
      <div class="flyer box">
          <span class="content medium"><span class="icon big right"></span>Medium Size Flyer With Action Button Text Goes In Here</span>
          <a href="#" class="button action" title="Action Button">Action Button</a>
      </div>
    • View the code

      Get your BONUS CARD today!

      Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.

      Redeem it
      <div class="flyer box bonus-promo">
          <span class="content medium"><span class="icon x-big right"></span>
              <h2>Get your BONUS CARD today!</h2>
              <p>Integer ac imperdiet sapien. Praesent varius justo in lorem lobortis mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rhoncus vulputate pharetra. Pellentesque sollicitudin mi risus, sed dictum orci fermentum pretium. Praesent porta ligula vel commodo faucibus.</p>
          </span>
          <a href="#" class="button action big" title="">Redeem it</span></a>
      </div>
  • View the code

    UIKit Sticky

    This is a sticky element.
     
    <div class="uikit-component extra-space-medium">
        <div class="box background-red" data-uk-sticky>
            <div class="content">This is a sticky element.</div>
        </div>
    </div>
  • View the code

    UIKit Sticky with Offset

    This is a sticky element with defined offset.
     
    <div class="uikit-component extra-space-medium">
        <div class="box background-red" data-uk-sticky="{top: 100}">
            <div class="content">This is a sticky element with defined offset.</div>
        </div>
    </div>
  • View the code

    Code Box

    @mixin text-shadow($shadows) {
        text-shadow: $shadows;
        -moz-text-shadow: $shadows;
        -webkit-text-shadow: $shadows;
    }
     
    <span class="code">
        <pre class="brush: sass">
            @mixin text-shadow($shadows) {
                text-shadow: $shadows;
                -moz-text-shadow: $shadows;
                -webkit-text-shadow: $shadows;
            }
        </pre>
    </span>
  • View the code

    Column (generated with generate-cols mixin - see the documentation on SASS Framework - Mixins Subsection)

    Col Content
     
    <div class="container cols-1">
        <div class="box col">
            <div class="content">Col Content</div>
        </div>
    </div>
    • Generic
    • Showcase
    • View the code

      Columns (generated with generate-cols mixin - see the documentation on SASS Framework - Mixins Subsection)

      Col Content
      Col Content
       
      <div class="container cols-2">
          <div class="box col">
              <div class="content">Col Content</div>
          </div>
          <div class="box col">
              <div class="content">Col Content</div>
          </div>
      </div>
    • View the code

      Featured Article

      Lorem ipsum dolor sit amet

      posted on in Web Design

      Image AltLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus. Donec vulputate nunc non arcu vehicula pretium. Mauris sollicitudin porta nisl.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus.

      read the entire article

      Categories

      • Web Design
      • Web Programming
      • Startups
      • Lifestyle
      • Fitness
      • Movies
      <div class="container cols-2 blog">
          <div class="box col">
              <div class="content">
                  <h4>Featured Article</h4>
                  <div class="article featured">
                      <h3 class="title"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h3>
                      <span class="details">
                          <small class="posted">posted on <span class="date"></span> in <a href="#" class="link category">Web Design</a></small>
                      </span>
                      <div class="excerpt">
                          <p><img class="left" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Alt" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus. Donec vulputate nunc non arcu vehicula pretium. Mauris sollicitudin porta nisl.</p>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus.</p>
                      </div>
                      <a href="#" class="read" title="Read the full article">read the entire article <span class="icon"></span></a>
                  </div>
              </div>
          </div>
          <div class="box col">
              <aside class="content blog-aside full-width">
                  <div class="categories">
                      <h3 class="title">Categories <span class="icon right"></span></h3>
                      <ul class="list">
                          <li class="item">
                              <a title="Web Design" class="link" href="#">Web Design</a>
                          </li>
                          <li class="item">
                              <a title="Web Programming" class="link" href="#">Web Programming</a>
                          </li>
                          <li class="item">
                              <a title="Startups" class="link" href="#">Startups</a>
                          </li>
                          <li class="item">
                              <a title="Lifestyle" class="link" href="#">Lifestyle</a>
                          </li>
                          <li class="item">
                              <a title="Fitness" class="link" href="#">Fitness</a>
                          </li>
                          <li class="item">
                              <a title="Movies" class="link" href="#">Movies</a>
                          </li>
                      </ul>
                  </div>
              </aside>
          </div>
      </div>
  • View the code

    Grid (generated with generate-grid mixin - see the documentation on SASS Framework - Mixins Subsection)

    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
    • Grid Cell Content
     
    <ul class="grid grid-5">
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
        <li class="item box cell">
            <div class="content">Grid Cell Content</div>
        </li>
    </ul>
    • Generic
    • Showcase
    • View the code

      Section

      Section Content
       
      <div class="section">
          <div class="content">Section Content</div>
      </div>
    • View the code
      IT Products
      • Notebooks
      • Desktops
      • Components
      • Peripherals
      • Networking
      <div class="section">
          <div class="content">
              <header>IT Products</header>
              <section>
                  <ul class="menu-list vertical">
                      <li class="item notebooks">
                          <a title="Notebooks" class="link" href="#">Notebooks</a>
                      </li>
                      <li class="item desktops">
                          <a title="Desktops" class="link" href="#">Desktops</a>
                      </li>
                      <li class="item components">
                          <a title="Components" class="link" href="#">Components</a>
                      </li>
                      <li class="item peripherals">
                          <a title="Peripherals" class="link" href="#">Peripherals</a>
                      </li>
                      <li class="item networking">
                          <a title="Networking" class="link" href="#">Networking</a>
                      </li>
                  </ul>
              </section>
          </div>
      </div>
  • View the code

    Section Variations

    • Free (without Margins) Section Content
    • Padded Section Content
    • Vertical Section Content
    • Horizontal Section Content
    • Left Section Content
    • Right Section Content
    • Top Section Content
    • Bottom Section Content
    • Full-Width Section Content - use it when you want a full-width (100%) section
     
    <ul class="list">
        <li class="item">
            <div class="section-free">
                <div class="content">Free (without Margins) Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-padded">
                <div class="content">Padded Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-vertical">
                <div class="content">Vertical Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-horizontal">
                <div class="content">Horizontal Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-left">
                <div class="content">Left Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-right">
                <div class="content">Right Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-top">
                <div class="content">Top Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-bottom">
                <div class="content">Bottom Section Content</div>
            </div>
        </li>
        <li class="item">
            <div class="section-full">
                <div class="content">Full-Width Section Content - use it when you want a full-width (100%) section</div>
            </div>
        </li>
    </ul>
Blackhole - Released under MIT license