• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
  • View the code

    Horizontal Rule

     
    <span class="hr"></span>
  • View the code

    Dotted Horizontal Rule

     
    <span class="hr-dotted"></span>
  • View the code

    Dashed Horizontal Rule

     
    <span class="hr-dashed"></span>
  • View the code

    Thick Dashed Horizontal Rule

     
    <span class="hr-dashed thick"></span>
  • View the code

    Thick Blue Horizontal Rule

     
    <span class="hr-thick border-blue"></span>
  • View the code

    Stripes Horizontal Rule

     
    <span class="hr-stripes"></span>
    • Generic
    • Showcase
    • View the code

      Element Moving

      Moving Right Item
       
      <span class="label moving-right">Moving Right Item</span>
    • View the code Grab Promotion
       
      <a href="#" class="button promotion moving-right" title="Grab it Now!">Grab Promotion <span class="icon right"></span></a>
  • View the code Moving Left Item
     
    <span class="label moving-left">Moving Left Item</span>
  • View the code

    Social Links

     
    <ul class="list social">
        <li class="item facebook">
            <a href="#" title="Facebook"><span class="icon"></span></a>
        </li>
        <li class="item twitter">
            <a href="#" title="Twitter"><span class="icon"></span></a>
        </li>
        <li class="item linkedin">
            <a href="#" title="Linkedin"><span class="icon"></span></a>
        </li>
        <li class="item google-plus">
            <a href="#" title="Google Plus"><span class="icon"></span></a>
        </li>
        <li class="item github">
            <a href="#" title="Github"><span class="icon"></span></a>
        </li>
        <li class="item flickr">
            <a href="#" title="Flickr"><span class="icon"></span></a>
        </li>
        <li class="item pinterest">
            <a href="#" title="Pinterest"><span class="icon"></span></a>
        </li>
        <li class="item foursquare">
            <a href="#" title="Foursquare"><span class="icon"></span></a>
        </li>
        <li class="item instagram">
            <a href="#" title="Instagram"><span class="icon"></span></a>
        </li>
        <li class="item vimeo">
            <a href="#" title="Vimeo"><span class="icon"></span></a>
        </li>
        <li class="item tumblr">
            <a href="#" title="Tumblr"><span class="icon"></span></a>
        </li>
        <li class="item youtube">
            <a href="#" title="Youtube"><span class="icon"></span></a>
        </li>
        <li class="item stack-overflow">
            <a href="#" title="Stack Overflow"><span class="icon"></span></a>
        </li>
        <li class="item dribbble">
            <a href="#" title="Dribbble"><span class="icon"></span></a>
        </li>
        <li class="item skype">
            <a href="#" title="Skype"><span class="icon"></span></a>
        </li>
        <li class="item dropbox">
            <a href="#" title="Dropbox"><span class="icon"></span></a>
        </li>
        <li class="item bitbucket">
            <a href="#" title="Bit Bucket"><span class="icon"></span></a>
        </li>
    </ul>
  • View the code

    Social Links with Background

     
    <ul class="list social with-background">
        <li class="item facebook">
            <a href="#" title="Facebook"><span class="icon"></span></a>
        </li>
        <li class="item twitter">
            <a href="#" title="Twitter"><span class="icon"></span></a>
        </li>
        <li class="item linkedin">
            <a href="#" title="Linkedin"><span class="icon"></span></a>
        </li>
        <li class="item google-plus">
            <a href="#" title="Google Plus"><span class="icon"></span></a>
        </li>
        <li class="item github">
            <a href="#" title="Github"><span class="icon"></span></a>
        </li>
        <li class="item flickr">
            <a href="#" title="Flickr"><span class="icon"></span></a>
        </li>
        <li class="item pinterest">
            <a href="#" title="Pinterest"><span class="icon"></span></a>
        </li>
        <li class="item foursquare">
            <a href="#" title="Foursquare"><span class="icon"></span></a>
        </li>
        <li class="item instagram">
            <a href="#" title="Instagram"><span class="icon"></span></a>
        </li>
        <li class="item vimeo">
            <a href="#" title="Vimeo"><span class="icon"></span></a>
        </li>
        <li class="item tumblr">
            <a href="#" title="Tumblr"><span class="icon"></span></a>
        </li>
        <li class="item youtube">
            <a href="#" title="Youtube"><span class="icon"></span></a>
        </li>
        <li class="item stack-overflow">
            <a href="#" title="Stack Overflow"><span class="icon"></span></a>
        </li>
        <li class="item dribbble">
            <a href="#" title="Dribbble"><span class="icon"></span></a>
        </li>
        <li class="item skype">
            <a href="#" title="Skype"><span class="icon"></span></a>
        </li>
        <li class="item dropbox">
            <a href="#" title="Dropbox"><span class="icon"></span></a>
        </li>
        <li class="item bitbucket">
            <a href="#" title="Bit Bucket"><span class="icon"></span></a>
        </li>
    </ul>
    • Generic
    • Showcase
    • View the code

      Timeline

      • 01-01-2014 Your Content Goes In Here
      • 05-01-2014 Your Content Goes In Here
      • 10-01-2014 Your Content Goes In Here
      • 15-01-2014 Your Content Goes In Here
      • 20-01-2014 Your Content Goes In Here
       
      <div class="timeline">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
          </ul>
      </div>
    • View the code

      Events going on

      • 01-01-2014 Image Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 05-01-2014 Image Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 10-01-2014 Image Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 15-01-2014 Image Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 20-01-2014 Image Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
       
      <h4>Events going on</h4>
      <div class="timeline">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">
                      <span class="title">Lorem ipsum dolor sit amet</span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
                  </span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">
                      <span class="title">Lorem ipsum dolor sit amet</span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
                  </span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">
                      <span class="title">Lorem ipsum dolor sit amet</span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
                  </span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">
                      <span class="title">Lorem ipsum dolor sit amet</span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
                  </span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">
                      <span class="title">Lorem ipsum dolor sit amet</span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
                  </span>
              </li>
          </ul>
      </div>
    • Generic
    • Showcase
    • View the code

      Vertical Timeline

      • 01-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 05-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 10-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 15-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 20-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
       
      <div class="timeline vertical">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
          </ul>
      </div>
    • View the code

      Events going on

      • 01-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 05-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 10-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 15-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 20-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
       
      <h4>Events going on</h4>
      <div class="timeline vertical">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
          </ul>
      </div>
    • Generic
    • Showcase
    • View the code

      Static Vertical Timeline

      • 01-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 05-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 10-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 15-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
      • 20-01-2014 Lorem ipsum dolor sit amet Your Content Goes In Here
       
      <div class="timeline vertical static">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <span class="dot"></span>
                  <span class="content">Your Content Goes In Here</span>
              </li>
          </ul>
      </div>
    • View the code

      Events going on

      • 01-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 05-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 10-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 15-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
      • 20-01-2014 Lorem ipsum dolor sit amet Image Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.
       
      <h4>Events going on</h4>
      <div class="timeline vertical">
          <ul class="list bar">
              <li class="item point">
                  <span class="datetime">01-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">05-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">10-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">15-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
              <li class="item point">
                  <span class="datetime">20-01-2014</span>
                  <span class="title">Lorem ipsum dolor sit amet</span>
                  <img class="dot" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image" />
                  <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac tellus vulputate, sodales purus convallis, dapibus lorem. Praesent tempor libero sit amet erat ullamcorper mattis. In luctus eget libero in condimentum. Maecenas sed elit sed est fermentum aliquam a vel metus.</span>
              </li>
          </ul>
      </div>
    • Generic
    • Showcase
    • View the code

      Pricing Table

      Free Premium Business
      feature go in here feature go in here feature go in here
      – feature go in here feature go in here
      – feature go in here feature go in here
      – – feature go in here
      – – feature go in here
      FREE 25 39
      Get this package Get this package Get this package
       
      <table class="pricing-table stripes">
          <thead>
              <tr>
                  <th class="one"><span class="title">Free</span></th>
                  <th class="two featured"><span class="title">Premium</span></th>
                  <th class="three"><span class="title">Business</span></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>feature go in here</td>
                  <td class="featured">feature go in here</td>
                  <td>feature go in here</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">feature go in here</td>
                  <td>feature go in here</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">feature go in here</td>
                  <td>feature go in here</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">–</td>
                  <td>feature go in here</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">–</td>
                  <td>feature go in here</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td>
                      <span class="price">
                          <span class="value">FREE</span>
                      </span>
                  </td>
                  <td>
                      <span class="price">
                          <span class="icon"></span>
                          <span class="value">25</span>
                      </span>
                  </td>
                  <td>
                      <span class="price">
                          <span class="icon"></span>
                          <span class="value">39</span>
                      </span>
                  </td>
              </tr>
              <tr>
                  <td class="one"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                  <td class="two featured"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                  <td class="three"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
              </tr>
          </tfoot>
      </table>
    • View the code

      Pricing

      Free Premium Business
      core functionality core functionality core functionality
      – extra modules extra modules
      – premium support premium support
      – – unlimited bandwidth
      – – unlimited team members
      FREE 25 39
      Get this package Get this package Get this package
       
      <h4>Pricing</h4>
      <table class="pricing-table stripes">
          <thead>
              <tr>
                  <th class="one"><span class="title">Free</span></th>
                  <th class="two featured"><span class="title">Premium</span></th>
                  <th class="three"><span class="title">Business</span></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>core functionality</td>
                  <td class="featured">core functionality</td>
                  <td>core functionality</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">extra modules</td>
                  <td>extra modules</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">premium support</td>
                  <td>premium support</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">–</td>
                  <td>unlimited bandwidth</td>
              </tr>
              <tr>
                  <td>–</td>
                  <td class="featured">–</td>
                  <td>unlimited team members</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td>
                      <span class="price">
                          <span class="value">FREE</span>
                      </span>
                  </td>
                  <td>
                      <span class="price">
                          <span class="icon"></span>
                          <span class="value">25</span>
                      </span>
                  </td>
                  <td>
                      <span class="price">
                          <span class="icon"></span>
                          <span class="value">39</span>
                      </span>
                  </td>
              </tr>
              <tr>
                  <td class="one"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                  <td class="two featured"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                  <td class="three"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
              </tr>
          </tfoot>
      </table>
  • View the code

    Pricing Table 2

    Features Free Premium Business
    feature no. 1
    feature no. 2
    feature no. 3
    feature no. 4
    feature no. 5
    price FREE 25 39
    pick your package Get this package Get this package Get this package
     
    <table class="pricing-table with-description">
        <thead>
            <tr>
                <th class="features"><span class="title">Features</span></th>
                <th class="one"><span class="title">Free</span></th>
                <th class="two featured"><span class="title">Premium</span></th>
                <th class="three"><span class="title">Business</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>feature no. 1</td>
                <td><span class="icon ok"></span></td>
                <td class="featured"><span class="icon ok"></span></td>
                <td><span class="icon ok"></span></td>
            </tr>
            <tr>
                <td>feature no. 2</td>
                <td><span class="icon error"></span></td>
                <td class="featured"><span class="icon ok"></span></td>
                <td><span class="icon ok"></span></td>
            </tr>
            <tr>
                <td>feature no. 3</td>
                <td><span class="icon error"></span></td>
                <td class="featured"><span class="icon ok"></span></td>
                <td><span class="icon ok"></span></td>
            </tr>
            <tr>
                <td>feature no. 4</td>
                <td><span class="icon error"></span></td>
                <td class="featured"><span class="icon error"></span></td>
                <td><span class="icon ok"></span></td>
            </tr>
            <tr>
                <td>feature no. 5</td>
                <td><span class="icon error"></span></td>
                <td class="featured"><span class="icon error"></span></td>
                <td><span class="icon ok"></span></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>price</td>
                <td>
                    <span class="price">
                        <span class="value">FREE</span>
                    </span>
                </td>
                <td>
                    <span class="price">
                        <span class="icon"></span>
                        <span class="value">25</span>
                    </span>
                </td>
                <td>
                    <span class="price">
                        <span class="icon"></span>
                        <span class="value">39</span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>pick your package</td>
                <td class="one"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                <td class="two featured"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
                <td class="three"><a title="Get this package" class="button" href="#">Get this package <span class="icon"></span></a></td>
            </tr>
        </tfoot>
    </table>
  • View the code

    List Pricing Table

    • Free
    • feature go in here
    • –
    • –
    • –
    • –
    • FREE Get this package
    • Premium
    • feature go in here
    • feature go in here
    • feature go in here
    • –
    • –
    • 25 Get this package
    • Business
    • feature go in here
    • feature go in here
    • feature go in here
    • feature go in here
    • feature go in here
    • 39 Get this package
     
    <div class="table pricing stripes">
        <ul class="list one">
            <li class="item header">
                <span class="title">Free</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item footer">
                <span class="price">
                    <span class="value">FREE</span>
                </span>
                <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
            </li>
        </ul>
        <ul class="list two featured">
            <li class="item header">
                <span class="title">Premium</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item">
                <span class="title">–</span>
            </li>
            <li class="item footer">
                <span class="price">
                    <span class="icon"></span>
                    <span class="value">25</span>
                </span>
                <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
            </li>
        </ul>
        <ul class="list three">
            <li class="item header">
                <span class="title">Business</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item">
                <span class="title">feature go in here</span>
            </li>
            <li class="item footer">
                <span class="price">
                    <span class="icon"></span>
                    <span class="value">39</span>
                </span>
                <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
            </li>
        </ul>
    </div>
  • View the code

    List Pricing Table 2

    • Features
    • feature no. 1
    • feature no. 1
    • feature no. 1
    • feature no. 1
    • feature no. 1
    • price pick your package
    • Free
    • FREE Get this package
    • Premium
    • 25 Get this package
    • Business
    • 39 Get this package
     
    <div class="table pricing stripes featured-outside">
        <ul class="list features">
            <li class="item header">
                <span class="title">Features</span>
            </li>
            <li class="item">
                <span class="title">feature no. 1</span>
            </li>
            <li class="item">
                <span class="title">feature no. 1</span>
            </li>
            <li class="item">
                <span class="title">feature no. 1</span>
            </li>
            <li class="item">
                <span class="title">feature no. 1</span>
            </li>
            <li class="item">
                <span class="title">feature no. 1</span>
            </li>
            <li class="item footer">
                <span class="title">price</span>
                <span class="title">pick your package</span>
            </li>
        </ul>
        <div class="packages">
            <ul class="list one">
                <li class="item header">
                    <span class="title">Free</span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon ok"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item footer">
                    <span class="price">
                        <span class="value">FREE</span>
                    </span>
                    <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
                </li>
            </ul>
            <ul class="list two featured">
                <li class="item header">
                    <span class="title">Premium</span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon ok"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon ok"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon ok"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item">
                    <span class="title"><span class="icon error"></span></span>
                </li>
                <li class="item footer">
                    <span class="price">
                        <span class="icon"></span>
                        <span class="value">25</span>
                    </span>
                    <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
                </li>
            </ul>
            <ul class="list three">
                <li class="item header">
                    <span class="title">Business</span>
                </li>
                <li class="item">
                    <span class="title">feature go in here</span>
                </li>
                <li class="item">
                    <span class="title">feature go in here</span>
                </li>
                <li class="item">
                    <span class="title">feature go in here</span>
                </li>
                <li class="item">
                    <span class="title">feature go in here</span>
                </li>
                <li class="item">
                    <span class="title">feature go in here</span>
                </li>
                <li class="item footer">
                    <span class="price">
                        <span class="icon"></span>
                        <span class="value">39</span>
                    </span>
                    <a href="#" class="button" title="Get this package">Get this package <span class="icon"></span></a>
                </li>
            </ul>
        </div>
    </div>
  • View the code

    Right Feedback

    Avatar Jane Doe Feedback Paragraph
     
    <div class="feedback">
        <span class="client">
            <img class="avatar" src="assets/img/samples/avatar-1.jpg" width="240" height="240" alt="Avatar" />
            <span class="name">Jane Doe</span>
        </span>
        <span class="quote"><span class="icon main"></span><span class="icon right"></span>Feedback Paragraph</span>
    </div>
  • View the code

    Left Feedback

    Feedback Paragraph Avatar Jane Doe
     
    <div class="feedback-right">
        <span class="quote"><span class="icon main"></span><span class="icon right"></span>Feedback Paragraph</span>
        <span class="client">
            <img class="avatar" src="assets/img/samples/avatar-1.jpg" width="240" height="240" alt="Avatar" />
            <span class="name">Jane Doe</span>
        </span>
    </div>
  • View the code

    Comments

    • Avatar Jane Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

    • Avatar John Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

      Avatar Jane Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

      Avatar John Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

    • Avatar Jane Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

    • Avatar John Doe

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.

     
    <div class="comments">
        <ul class="list">
            <li class="item">
                <section class="comment">
                    <aside class="left commenter">
                        <img class="avatar" src="assets/img/samples/avatar-1.jpg" width="240" height="240" alt="Avatar" />
                        <span class="name">Jane Doe</span>
                    </aside>
                    <aside class="left comment-block">
                        <ul class="list controls">
                            <li class="item reply">
                                <a href="#" class="link icon" title="Reply this comment"></a>
                            </li>
                            <li class="item like">
                                <a href="#" class="link icon" title="Like this comment"></a>
                            </li>
                            <li class="item report">
                                <a href="#" class="link icon" title="Report this comment"></a>
                            </li>
                        </ul>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                    </aside>
                </section>
            </li>
            <li class="item replied">
                <section class="comment">
                    <aside class="left commenter">
                        <img class="avatar" src="assets/img/samples/avatar-4.jpg" width="240" height="240" alt="Avatar" />
                        <span class="name">John Doe</span>
                    </aside>
                    <aside class="left comment-block">
                        <ul class="list controls">
                            <li class="item reply">
                                <a href="#" class="link icon" title="Reply this comment"></a>
                            </li>
                            <li class="item like">
                                <a href="#" class="link icon" title="Like this comment"></a>
                            </li>
                            <li class="item report">
                                <a href="#" class="link icon" title="Report this comment"></a>
                            </li>
                        </ul>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                    </aside>
                </section>
                <div class="reply replied">
                    <section class="comment replier replied">
                        <span class="icon"></span>
                        <aside class="left commenter">
                            <img class="avatar" src="assets/img/samples/avatar-3.jpg" width="240" height="240" alt="Avatar" />
                            <span class="name">Jane Doe</span>
                        </aside>
                        <aside class="left comment-block">
                            <ul class="list controls">
                                <li class="item reply">
                                    <a href="#" class="link icon" title="Reply this comment"></a>
                                </li>
                                <li class="item like">
                                    <a href="#" class="link icon" title="Like this comment"></a>
                                </li>
                                <li class="item report">
                                    <a href="#" class="link icon" title="Report this comment"></a>
                                </li>
                            </ul>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                        </aside>
                    </section>
                    <div class="reply">
                        <section class="comment replier">
                            <span class="icon"></span>
                            <aside class="left commenter">
                                <img class="avatar" src="assets/img/samples/avatar-5.jpg" width="240" height="240" alt="Avatar" />
                                <span class="name">John Doe</span>
                            </aside>
                            <aside class="left comment-block">
                                <ul class="list controls">
                                    <li class="item reply">
                                        <a href="#" class="link icon" title="Reply this comment"></a>
                                    </li>
                                    <li class="item like">
                                        <a href="#" class="link icon" title="Like this comment"></a>
                                    </li>
                                    <li class="item report">
                                        <a href="#" class="link icon" title="Report this comment"></a>
                                    </li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                            </aside>
                        </section>
                    </div>
                </div>
            </li>
            <li class="item">
                <section class="comment clearfix">
                    <aside class="left commenter">
                        <img class="avatar" src="assets/img/samples/avatar-3.jpg" width="240" height="240" alt="Avatar" />
                        <span class="name">Jane Doe</span>
                    </aside>
                    <aside class="left comment-block">
                        <ul class="list controls">
                            <li class="item reply">
                                <a href="#" class="link icon" title="Reply this comment"></a>
                            </li>
                            <li class="item like">
                                <a href="#" class="link icon" title="Like this comment"></a>
                            </li>
                            <li class="item report">
                                <a href="#" class="link icon" title="Report this comment"></a>
                            </li>
                        </ul>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                    </aside>
                </section>
            </li>
            <li class="item">
                <section class="comment clearfix">
                    <aside class="left commenter">
                        <img class="avatar" src="assets/img/samples/avatar-5.jpg" width="240" height="240" alt="Avatar" />
                        <span class="name">John Doe</span>
                    </aside>
                    <aside class="left comment-block">
                        <ul class="list controls">
                            <li class="item reply">
                                <a href="#" class="link icon" title="Reply this comment"></a>
                            </li>
                            <li class="item like">
                                <a href="#" class="link icon" title="Like this comment"></a>
                            </li>
                            <li class="item report">
                                <a href="#" class="link icon" title="Report this comment"></a>
                            </li>
                        </ul>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo, turpis ultrices vestibulum mollis, metus dui tincidunt tellus, eu ultricies diam libero vitae mi.</p>
                    </aside>
                </section>
            </li>
        </ul>
        <div class="post-comment">
            <textarea class="input text" name="comment" cols="70" rows="5">enter your comment</textarea>
            <button type="submit" class="input button">post comment</button>
        </div>
    </div>
    • Generic
    • Showcase
    • View the code this component uses the revealPlugin function which you can find in the js/main.js file from your framework root directory

      Hide and Reveal Element

      • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel urna sit amet justo adipiscing tristique. Nunc ipsum tortor, facilisis at orci quis, sollicitudin adipiscing risus.

        display the hidden element
      • Hidden Content

       
      <ul class="list reveal">
          <li class="item visible-element">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel urna sit amet justo adipiscing tristique. Nunc ipsum tortor, facilisis at orci quis, sollicitudin adipiscing risus.</p>
              <a href="#" class="button trigger" title="Display the Hidden Element"><span class="title">display the hidden element</span> <span class="icon right"></span></a>
          </li>
          <li class="item hidden-element">
              <p class="background-blue">Hidden Content</p>
          </li>
      </ul>
    • View the code
      • toggle menu
        • Menu Item 1
        • Menu Item 2
        • Menu Item 3
        • Menu Item 4
        • Menu Item 5
       
      <ul class="list reveal">
          <li class="item visible-element">
              <a href="#" class="button trigger" title="Toggle the Menu"><span class="title">toggle menu</span> <span class="icon right"></span></a>
          </li>
          <li class="item hidden-element">
              <ul class="menu-list">
                  <li class="item">
                      <a title="Menu Item 1" class="link" href="#">Menu Item 1</a>
                  </li>
                  <li class="item">
                      <a title="Menu Item 2" class="link" href="#">Menu Item 2</a>
                  </li>
                  <li class="item">
                      <a title="Menu Item 3" class="link" href="#">Menu Item 3</a>
                  </li>
                  <li class="item">
                      <a title="Menu Item 4" class="link" href="#">Menu Item 4</a>
                  </li>
                  <li class="item">
                      <a title="Menu Item 5" class="link" href="#">Menu Item 5</a>
                  </li>
              </ul>
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code this component uses the ajaxLoader function which you can find in the js/main.js file from your framework root directory

      Ajax Loader

      load AJAX content
       
      <div class="ajax-loader">
          <a href="js/ajax/data/ajax-content.html" class="button ajax-trigger" title="Load Ajax Content">load AJAX content</a>
          <div class="box" id="ajax-content"></div>
      </div>
    • View the code

      Latest Articles

      • Lorem ipsum dolor sit amet

        posted on in Web Design

        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.

        read the entire article
      • Lorem ipsum dolor sit amet

        posted on in Web Design

        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.

        read the entire article
      • Lorem ipsum dolor sit amet

        posted on in Web Design

        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.

        read the entire article
      load more
       
      <div class="ajax-loader load-more-articles">
          <h4>Latest Articles</h4>
          <div class="articles">
              <ul class="list">
                  <li class="item article">
                      <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>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>
                      </div>
                      <a href="#" class="read" title="Read the full article">read the entire article <span class="icon"></span></a>
                  </li>
                  <li class="item article">
                      <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>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>
                      </div>
                      <a href="#" class="read" title="Read the full article">read the entire article <span class="icon"></span></a>
                  </li>
                  <li class="item article">
                      <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>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>
                      </div>
                      <a href="#" class="read" title="Read the full article">read the entire article <span class="icon"></span></a>
                  </li>
                  <li id="ajax-content" class="item list">
                      
                  </li>
              </ul>
          </div>
          <a href="js/ajax/data/ajax-demo.html" class="button ajax-trigger" title="Load more Articles">load more <span class="icon right"></span></a>
      </div>
    • Generic
    • Showcase
    • View the code

      Animations - click on element to trigger

      Fade Content

      Scale Up Content

      Scale Down Content

      Slide Top Content

      Slide Bottom Content

      Slide Left Content

      Slide Right Content

      Shake Content

       
      <div class="uikit-component">
          <div class="box spaced background-red" data-docs-animation="uk-animation-fade">
              <div class="content">
                  <p>Fade Content</p>
              </div>
          </div>
          <div class="box spaced background-green" data-docs-animation="uk-animation-scale-up">
              <div class="content">
                  <p>Scale Up Content</p>
              </div>
          </div>
          <div class="box spaced background-blue" data-docs-animation="uk-animation-scale-down">
              <div class="content">
                  <p>Scale Down Content</p>
              </div>
          </div>
          <div class="box spaced background-yellow" data-docs-animation="uk-animation-slide-top">
              <div class="content">
                  <p>Slide Top Content</p>
              </div>
          </div>
          <div class="box spaced background-orange" data-docs-animation="uk-animation-slide-bottom">
              <div class="content">
                  <p>Slide Bottom Content</p>
              </div>
          </div>
          <div class="box spaced background-pink" data-docs-animation="uk-animation-slide-left">
              <div class="content">
                  <p>Slide Left Content</p>
              </div>
          </div>
          <div class="box spaced background-purple" data-docs-animation="uk-animation-slide-right">
              <div class="content">
                  <p>Slide Right Content</p>
              </div>
          </div>
          <div class="box spaced background-brown" data-docs-animation="uk-animation-shake">
              <div class="content">
                  <p>Shake Content</p>
              </div>
          </div>
      </div>
    • View the code
      Redeem Gift You cannot redeem your gift at this moment. Please try again later.
       
      <div class="uikit-component">
          <label for="gift-code-input">Gift Code:</label>
          <span class="input-wrapper multiple">
              <input type="text" id="gift-code-input" class="input text disabled" name="name" placeholder="XXXX-XXXX-XXXX-XXXX" disabled />
              <a href="#" class="button" data-uk-toggle="{target:'#uikit-toggle-example'}" data-docs-animation="uk-animation-shake">Redeem Gift</a>
          </span>
          <span id="uikit-toggle-example" class="message-error with-icon spaced uk-hidden">You cannot redeem your gift at this moment. Please try again later. <span class="icon right"></span></span>
      </div>
    • Generic
    • Showcase
    • View the code

      Scrollspy Animator

      Animation Box - Fade

      Animation Box - Scale Up

      Animation Box - Slide Bottom

      Animation Box - Delay

       
      <div class="uikit-component">
          <div class="box uk-animation-fade" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
              <div class="content">
                  <p>Animation Box 1</p>
              </div>
          </div>
          <div class="box background-red" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
              <div class="content">
                  <p>Animation Box 2</p>
              </div>
          </div>
          <div class="box background-blue" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true, delay: 900}">
              <div class="content">
                  <p>Animation Box 3</p>
              </div>
          </div>
          <div class="box background-purple" data-uk-scrollspy="{cls:'uk-animation-shake', repeat: true}">
              <div class="content">
                  <p>Animation Box 4</p>
              </div>
          </div>
      </div>
    • View the code
      You have just received a message. Click here to read it.
       
      <div class="uikit-component">
          <span class="message-warning with-icon" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">You have just received a message. Click <a href="#" title="Read New Message">here</a> to read it. <span class="icon right"></span></span>
      </div>
    • Generic
    • Showcase
    • View the code

      Scrollspy Nav

      • Repeat
      • Delay
      • Fade
      • Scale Up
      • Scale Down
      • Slide Top
      • Slide Bottom
      • Slide Left
      • Slide Right

      Repeat Animation

      This animation will NOT repeat

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      This animation will repeat

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Delay Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Fade Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Scale Up Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Scale Down Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Slide Top Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Slide Bottom Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Slide Left Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Slide Right Animation

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

      Delay Animation

      Box Delayed 1 second

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Box Delayed 2 seconds

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Box Delayed 3 seconds

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

      Box Delayed 4 seconds

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit, erat at adipiscing faucibus, urna tellus consectetur diam, in gravida ligula dolor et lacus. Curabitur eget sodales lacus, vel porttitor sapien. Sed ut est a nulla interdum tempus non in enim. Vivamus augue orci, porta at ligula at, tristique tristique tortor. Etiam egestas, massa in sagittis placerat, augue lectus suscipit est, id pretium felis nibh sed purus. Curabitur mollis metus urna. Suspendisse feugiat, dolor nec pharetra ultricies, leo tortor laoreet tellus, id dictum urna massa vitae mauris.

       
      <div class="uikit-component">
          <ul class="scrollspy-nav menu-list vertical" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: true}">
              <li class="item">
                  <a title="Repeat Animation" class="link" href="#animation-repeat">Repeat</a>
              </li>
              <li class="item">
                  <a title="Delay Animation" class="link" href="#animation-delay">Delay</a>
              </li>
              <li class="item">
                  <a title="Fade Animation" class="link" href="#animation-fade">Fade</a>
              </li>
              <li class="item">
                  <a title="Scale Up Animation" class="link" href="#animation-scale-up">Scale Up</a>
              </li>
              <li class="item">
                  <a title="Scale Down Animation" class="link" href="#animation-scale-down">Scale Down</a>
              </li>
              <li class="item">
                  <a title="Slide Top Animation" class="link" href="#animation-slide-top">Slide Top</a>
              </li>
              <li class="item">
                  <a title="Slide Bottom Animation" class="link" href="#animation-slide-bottom">Slide Bottom</a>
              </li>
              <li class="item">
                  <a title="Slide Left Animation" class="link" href="#animation-slide-left">Slide Left</a>
              </li>
              <li class="item">
                  <a title="Slide Right Animation" class="link" href="#animation-slide-right">Slide Right</a>
              </li>
          </ul>
          <div class="animations-container">
              <div id="animation-repeat" class="spaced">
                  <h1>Repeat Animation</h1>
                  <div class="container cols-2">
                      <div class="box col uk-animation-repeat" data-uk-scrollspy="{cls:'uk-animation-slide-right'}">
                          <div class="content">
                              <h2 class="red">This animation will NOT repeat</h2>
                              <p>...</p>
                          </div>
                      </div>
                      <div class="box col uk-animation-repeat background-neutral" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                          <div class="content">
                              <h2>This animation will repeat</h2>
                              <p>...</p>
                          </div>
                      </div>
                  </div>
              </div>
              <div id="animation-delay" class="spaced">
                  <h1>Delay Animation</h1>
                  <div class="box uk-animation-fade background-neutral" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true, delay: 1000}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-fade" class="spaced">
                  <h1>Fade Animation</h1>
                  <div class="box uk-animation-fade background-neutral" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-scale-up" class="spaced">
                  <h1>Scale Up Animation</h1>
                  <div class="box uk-animation-scale-up background-neutral" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-scale-down" class="spaced">
                  <h1>Scale Down Animation</h1>
                  <div class="box uk-animation-scale-down background-neutral" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-slide-top" class="spaced">
                  <h1>Slide Top Animation</h1>
                  <div class="box uk-animation-slide-top background-neutral" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-slide-bottom" class="spaced">
                  <h1>Slide Bottom Animation</h1>
                  <div class="box uk-animation-slide-bottom background-neutral" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-slide-left" class="spaced">
                  <h1>Slide Left Animation</h1>
                  <div class="box uk-animation-slide-left background-neutral" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-slide-right" class="spaced">
                  <h1>Slide Right Animation</h1>
                  <div class="box uk-animation-slide-right background-neutral" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                      <div class="content">
                          <p>...</p>
                      </div>
                  </div>
              </div>
              <div id="animation-delay-2" class="spaced">
                  <h1>Delay Animation</h1>
                  <div class="container cols-4">
                      <div class="box col uk-animation-slide-left background-red" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 1000}">
                          <div class="content">
                              <h2>Box Delayed 1 second</h2>
                              <p>...</p>
                          </div>
                      </div>
                      <div class="box col uk-animation-slide-left background-blue" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 2000}">
                          <div class="content">
                              <h2>Box Delayed 2 seconds</h2>
                              <p>...</p>
                          </div>
                      </div>
                      <div class="box col uk-animation-slide-left background-purple" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 3000}">
                          <div class="content">
                              <h2>Box Delayed 3 seconds</h2>
                              <p>...</p>
                          </div>
                      </div>
                      <div class="box col uk-animation-slide-left background-orange" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 4000}">
                          <div class="content">
                              <h2>Box Delayed 4 seconds</h2>
                              <p>...</p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    • View the code
      •  
      •  
      •  

      Latest News

      • HOT Heading Title

        Image Description Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

        Vestibulum bibendum nulla varius arcu tristique varius. Nunc tincidunt lorem porta, dignissim orci sit amet, congue orci. Nunc ac velit erat. Quisque erat turpis, blandit quis sagittis eget, ullamcorper in odio. Proin ut luctus augue. Nam dapibus dui nec elit sollicitudin porta. Praesent hendrerit purus vitae arcu mattis, non pretium odio commodo. Vestibulum vestibulum, arcu id hendrerit mollis, magna ipsum volutpat libero, bibendum posuere lorem est vel eros. Nunc vestibulum porta lacus, vel adipiscing metus auctor quis. Curabitur vulputate augue eu turpis fermentum posuere sed non augue. Mauris sit amet gravida ligula, vitae hendrerit dui. Cras lectus turpis, congue vitae quam ut, lacinia dictum augue. Aenean commodo augue at auctor cursus.

      • Heading Title

        Image Description Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

        Vestibulum bibendum nulla varius arcu tristique varius. Nunc tincidunt lorem porta, dignissim orci sit amet, congue orci. Nunc ac velit erat. Quisque erat turpis, blandit quis sagittis eget, ullamcorper in odio. Proin ut luctus augue. Nam dapibus dui nec elit sollicitudin porta. Praesent hendrerit purus vitae arcu mattis, non pretium odio commodo. Vestibulum vestibulum, arcu id hendrerit mollis, magna ipsum volutpat libero, bibendum posuere lorem est vel eros. Nunc vestibulum porta lacus, vel adipiscing metus auctor quis. Curabitur vulputate augue eu turpis fermentum posuere sed non augue. Mauris sit amet gravida ligula, vitae hendrerit dui. Cras lectus turpis, congue vitae quam ut, lacinia dictum augue. Aenean commodo augue at auctor cursus.

      • Heading Title

        Image Description Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus adipiscing arcu turpis, vitae varius nibh dictum vitae. Sed consectetur leo vitae aliquam malesuada. Aenean eu est varius magna convallis pellentesque. Donec eu aliquet dui, ut fringilla nisl. Praesent iaculis condimentum metus, sed lobortis nunc accumsan eu. Etiam rutrum in mi ut interdum. Etiam mattis orci eget tempor volutpat. Suspendisse sollicitudin sollicitudin metus, vitae sodales dolor malesuada sed. Pellentesque placerat at lectus non gravida. Curabitur vel sodales lectus, ornare fringilla sapien. Ut laoreet hendrerit magna, sit amet lacinia mauris lacinia facilisis.

        Vestibulum bibendum nulla varius arcu tristique varius. Nunc tincidunt lorem porta, dignissim orci sit amet, congue orci. Nunc ac velit erat. Quisque erat turpis, blandit quis sagittis eget, ullamcorper in odio. Proin ut luctus augue. Nam dapibus dui nec elit sollicitudin porta. Praesent hendrerit purus vitae arcu mattis, non pretium odio commodo. Vestibulum vestibulum, arcu id hendrerit mollis, magna ipsum volutpat libero, bibendum posuere lorem est vel eros. Nunc vestibulum porta lacus, vel adipiscing metus auctor quis. Curabitur vulputate augue eu turpis fermentum posuere sed non augue. Mauris sit amet gravida ligula, vitae hendrerit dui. Cras lectus turpis, congue vitae quam ut, lacinia dictum augue. Aenean commodo augue at auctor cursus.

       
      <div class="uikit-component">
          <ul class="dotted-scrollspy-nav menu-list vertical" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: true}">
              <li class="item">
                  <a title="Go to Content Block 1" class="link" href="#content-block-1"> </a>
              </li>
              <li class="item">
                  <a title="Go to Content Block 2" class="link" href="#content-block-2"> </a>
              </li>
              <li class="item">
                  <a title="Go to Content Block 3" class="link" href="#content-block-3"> </a>
              </li>
          </ul>
          <h1>Latest News</h1>
          <ul class="list animations-container">
              <li id="content-block-1" class="spaced extra-space-x-big">
                  <div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}" class="article background-red">
                      <h2>HOT Heading Title</h2>
                      <p><img class="right" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" /> ...</p>
                  </div>
              </li>
              <li id="content-block-2" class="spaced extra-space-x-big">
                  <div data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}" class="article background-neutral">
                      <h2>Heading Title</h2>
                      <p><img class="left" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" /> ...</p>
                  </div>
              </li>
              <li id="content-block-3" class="spaced">
                  <div data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}" class="article background-neutral">
                      <h2>Heading Title</h2>
                      <p><img class="right" src="assets/img/base/sample-thumb.jpg" width="272" height="180" alt="Image Description" /> ...</p>
                  </div>
              </li>
          </ul>
      </div>
  • View the code

    Transforms

    • Rotate
    • Default Rotate

    • Rotate 45 degrees

    • Rotate 90 degrees

    • Rotate 135 degrees

    • Rotate 180 degrees

    • Rotate 270 degrees

    • Scale
    • Scale Full

    • Scale Double

    • Scale Half

    • Scale (Rotate) Horizontal

    • Translate
    • Translate XY

    • Translate Right

    • Translate Left

    • Translate Top

    • Translate Bottom

     
    <ul class="list transforms small-width">
        <li class="item title rotation">
            <h5 class="red">Rotate</h5>
        </li>
        <li class="item rotate extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Default Rotate</p>
                </div>
            </div>
        </li>
        <li class="item rotate-45 extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Rotate 45 degrees</p>
                </div>
            </div>
        </li>
        <li class="item rotate-90 extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Rotate 90 degrees</p>
                </div>
            </div>
        </li>
        <li class="item rotate-135 extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Rotate 135 degrees</p>
                </div>
            </div>
        </li>
        <li class="item rotate-180 extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Rotate 180 degrees</p>
                </div>
            </div>
        </li>
        <li class="item rotate-270 extra-space-x-small">
            <div class="box background-red">
                <div class="content">
                    <p>Rotate 270 degrees</p>
                </div>
            </div>
        </li>
        <li class="item title scale">
            <h5 class="red">Scale</h5>
        </li>
        <li class="item scale-full extra-space-x-small">
            <div class="box background-green">
                <div class="content">
                    <p>Scale Full</p>
                </div>
            </div>
        </li>
        <li class="item scale-double extra-space-x-small">
            <div class="box background-green">
                <div class="content">
                    <p>Scale Double</p>
                </div>
            </div>
        </li>
        <li class="item scale-half extra-space-x-small">
            <div class="box background-green">
                <div class="content">
                    <p>Scale Half</p>
                </div>
            </div>
        </li>
        <li class="item rotate-horizontal extra-space-x-small">
            <div class="box background-green">
                <div class="content">
                    <p>Scale (Rotate) Horizontal</p>
                </div>
            </div>
        </li>
        <li class="item title translate">
            <h5 class="red">Translate</h5>
        </li>
        <li class="item translate-XY extra-space-x-small">
            <div class="box background-blue">
                <div class="content">
                    <p>Translate XY</p>
                </div>
            </div>
        </li>
        <li class="item translate-right extra-space-x-small">
            <div class="box background-blue">
                <div class="content">
                    <p>Translate Right</p>
                </div>
            </div>
        </li>
        <li class="item translate-left extra-space-x-small">
            <div class="box background-blue">
                <div class="content">
                    <p>Translate Left</p>
                </div>
            </div>
        </li>
        <li class="item translate-top extra-space-x-small">
            <div class="box background-blue">
                <div class="content">
                    <p>Translate Top</p>
                </div>
            </div>
        </li>
        <li class="item translate-bottom extra-space-x-small">
            <div class="box background-blue">
                <div class="content">
                    <p>Translate Bottom</p>
                </div>
            </div>
        </li>
    </ul>
Blackhole - Released under MIT license