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

      UIKit Switcher

      • Tab 1
      • Tab 2
      • Tab 3
      • Content of Tab 1

      • Content of Tab 2

      • Content of Tab 3

       
      <div class="uikit-component">
          <ul class="list uk-tab" data-uk-tab="{connect:'#uikit-switcher'}">
              <li class="item">
                  <a href="#" title="Tab 1">Tab 1</a>
              </li>
              <li class="item">
                  <a href="#" title="Tab 2">Tab 2</a>
              </li>
              <li class="item">
                  <a href="#" title="Tab 3">Tab 3</a>
              </li>
          </ul>
          <ul id="uikit-switcher" class="list uk-switcher uk-margin">
              <li class="item">
                  <p class="content">Content of Tab 1</p>
              </li>
              <li class="item">
                  <p class="content">Content of Tab 2</p>
              </li>
              <li class="item">
                  <p class="content">Content of Tab 3</p>
              </li>
          </ul>
      </div>
    • View the code
      • Profile
      • Settings
       
      <div class="uikit-component">
          <ul class="list uk-tab" data-uk-tab="{connect:'#uikit-switcher-example'}">
              <li class="item">
                  <a href="#" title="Account Profile">Profile</a>
              </li>
              <li class="item">
                  <a href="#" title="Account Settings">Settings</a>
              </li>
          </ul>
          <ul id="uikit-switcher-example" class="list uk-switcher uk-margin">
              <li class="item">
                  <form class="form-validate" action="your-script" method="POST">
                      <fieldset>
                          <div class="group">
                              <label for="name">Name</label>
                              <input type="text" class="input text" name="name" placeholder="name" id="name2" required />
                          </div>
                          <div class="group">
                              <label for="surname">Surname</label>
                              <input type="text" class="input text" name="surname" placeholder="surname" id="surname2" />
                          </div>
                          <div class="group input-wrapper multiple">
                              <label>Profile Photo</label>
                              <input type="text" class="input text" name="text" value="Choose a file" disabled="disabled" />
                              <label for="file-input" class="button file">Profile Photo <span class="icon right"></span></label><input type="file" class="input" name="file" id="file-input2" />
                          </div>
                      </fieldset>
                      <button type="submit" class="input button">save changes</button>
                  </form>
              </li>
              <li class="item">
                  <form class="form-validate" action="your-script" method="POST">
                      <fieldset>
                          <label for="username">Username</label>
                          <input type="text" class="input text" name="username" placeholder="username" id="username2" required />
                          <label for="password">Password</label>
                          <input type="password" class="input text" name="password" id="password3" required />
                          <label for="password2">Reenter Password</label>
                          <input type="password" class="input text" name="password2" id="password4" required />
                          <label for="email">Email</label>
                          <input type="email" class="input text" name="email" placeholder="email address" id="email2" required />
                      </fieldset>
                      <button type="submit" class="input button">save changes</button>
                  </form>
              </li>
          </ul>
      </div>
  • View the code

    UIKit Bottom Switcher

    • Content of Tab 1

    • Content of Tab 2

    • Content of Tab 3

    • Tab 1
    • Tab 2
    • Tab 3
     
    <div class="uikit-component">
        <ul id="uikit-bottom-switcher" class="list uk-switcher uk-margin">
            <li class="item">
                <p class="content">Content of Tab 1</p>
            </li>
            <li class="item">
                <p class="content">Content of Tab 2</p>
            </li>
            <li class="item">
                <p class="content">Content of Tab 3</p>
            </li>
        </ul>
        <ul class="list uk-tab uk-tab-bottom" data-uk-tab="{connect:'#uikit-bottom-switcher'}">
            <li class="item">
                <a href="#" title="Tab 1">Tab 1</a>
            </li>
            <li class="item">
                <a href="#" title="Tab 2">Tab 2</a>
            </li>
            <li class="item">
                <a href="#" title="Tab 3">Tab 3</a>
            </li>
        </ul>
    </div>
  • View the code

    UIKit Vertical Left Switcher

    • Tab 1
    • Tab 2
    • Tab 3
    • Content of Tab 1

    • Content of Tab 2

    • Content of Tab 3

     
    <div class="uikit-component">
        <aside class="switcher-tabs left">
            <ul class="list uk-tab uk-tab-left" data-uk-tab="{connect:'#uikit-vertical-switcher'}">
                <li class="item">
                    <a href="#" title="Tab 1">Tab 1</a>
                </li>
                <li class="item">
                    <a href="#" title="Tab 2">Tab 2</a>
                </li>
                <li class="item">
                    <a href="#" title="Tab 3">Tab 3</a>
                </li>
            </ul>
        </aside>
        <aside class="switcher-content left">
            <ul id="uikit-vertical-switcher" class="list uk-switcher uk-margin">
                <li class="item">
                    <p class="content">Content of Tab 1</p>
                </li>
                <li class="item">
                    <p class="content">Content of Tab 2</p>
                </li>
                <li class="item">
                    <p class="content">Content of Tab 3</p>
                </li>
            </ul>
        </aside>
    </div>
  • View the code

    UIKit Vertical Right Switcher

    • Tab 1
    • Tab 2
    • Tab 3
    • Content of Tab 1

    • Content of Tab 2

    • Content of Tab 3

     
    <div class="uikit-component">
        <aside class="switcher-tabs right">
            <ul class="list uk-tab uk-tab-right" data-uk-tab="{connect:'#uikit-right-vertical-switcher'}">
                <li class="item">
                    <a href="#" title="Tab 1">Tab 1</a>
                </li>
                <li class="item">
                    <a href="#" title="Tab 2">Tab 2</a>
                </li>
                <li class="item">
                    <a href="#" title="Tab 3">Tab 3</a>
                </li>
            </ul>
        </aside>
        <aside class="switcher-content right">
            <ul id="uikit-right-vertical-switcher" class="list uk-switcher uk-margin">
                <li class="item">
                    <p class="content">Content of Tab 1</p>
                </li>
                <li class="item">
                    <p class="content">Content of Tab 2</p>
                </li>
                <li class="item">
                    <p class="content">Content of Tab 3</p>
                </li>
            </ul>
        </aside>
    </div>
    • Generic
    • Showcase
    • View the code

      UIKit Progress Bar

      50%
       
      <div class="uikit-component">
          <div class="uk-progress">
              <div class="uk-progress-bar" style="width: 50%;">50%</div>
          </div>
      </div>
    • View the code
      • jQuery
        80%
      • AngularJS
        30%
      • EmberJS
        60%
       
      <div class="uikit-component">
          <ul class="list skills">
              <li class="item jquery">
                  <span class="skill">jQuery</span>
                  <div class="uk-progress">
                      <div class="uk-progress-bar" style="width: 80%;">80%</div>
                  </div>
              </li>
              <li class="item angular-js">
                  <span class="skill">AngularJS</span>
                  <div class="uk-progress">
                      <div class="uk-progress-bar" style="width: 30%;">30%</div>
                  </div>
              </li>
              <li class="item ember-js">
                  <span class="skill">EmberJS</span>
                  <div class="uk-progress">
                      <div class="uk-progress-bar" style="width: 60%;">60%</div>
                  </div>
              </li>
          </ul>
      </div>
  • View the code

    UIKit Progress Bar with States

    100% (Complete)
    75% (In Progress)
    27% (Interrupted)
     
    <div class="uikit-component">
        <div class="uk-progress uk-progress-success">
            <div class="uk-progress-bar" style="width: 100%;">100% (Complete)</div>
        </div>
        <div class="uk-progress uk-progress-warning">
            <div class="uk-progress-bar" style="width: 75%;">75% (In Progress)</div>
        </div>
        <div class="uk-progress uk-progress-danger">
            <div class="uk-progress-bar" style="width: 27%;">27% (Interrupted)</div>
        </div>
    </div>
  • View the code

    UIKit Striped Progress Bar

    75%
     
    <div class="uikit-component">
        <div class="uk-progress uk-progress-striped">
            <div class="uk-progress-bar" style="width: 75%;">75%</div>
        </div>
    </div>
  • View the code

    UIKit Animated Striped Progress Bar with State

    75%
     
    <div class="uikit-component">
        <div class="uk-progress uk-progress-striped uk-progress-warning uk-active">
            <div class="uk-progress-bar" style="width: 75%;">75%</div>
        </div>
    </div>
    • Generic
    • Showcase
    • View the code

      UIKit Dropdown

      Dropdown Trigger
      • Dropdown Item 1
      • Dropdown Item 2
      • Dropdown Item 3
      • Dropdown Item 4
      • Dropdown Item 5
       
      <div class="uikit-component">
          <div class="uikit-dropdown" data-uk-dropdown="{mode:'click'}">
              <a href="#" class="button uikit-trigger" title="Dropdown Trigger">Dropdown Trigger <span class="icon right"></span></a>
              <div class="uk-dropdown">
                  <ul class="menu">
                      <li class="item">
                          <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
    • View the code
      Account
      • Profile
      • Preferences
      • Settings
       
      <div class="uikit-component">
          <div class="uikit-dropdown" data-uk-dropdown="{mode:'click'}">
              <a href="#" class="button uikit-trigger" title="Account"><span class="icon-default main left"></span><span class="title">Account</span><span class="icon right"></span></a>
              <div class="uk-dropdown">
                  <ul class="menu">
                      <li class="item">
                          <a href="#" class="link" title="Change Profile">Profile</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Change Preferences">Preferences</a>
                      </li>
                      <li class="item">
                          <a href="#" class="link" title="Change Settings">Settings</a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  • View the code

    UIKit Dropdown on Hover

    Dropdown Trigger
    • Dropdown Item 1
    • Dropdown Item 2
    • Dropdown Item 3
    • Dropdown Item 4
    • Dropdown Item 5
     
    <div class="uikit-component">
        <div class="uikit-dropdown" data-uk-dropdown>
            <a href="#" class="button uikit-trigger" title="Dropdown Trigger">Dropdown Trigger <span class="icon right"></span></a>
            <div class="uk-dropdown">
                <ul class="menu">
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  • View the code

    UIKit Dropdown with Arrow Trigger

    Dropdown Arrow Trigger
    • Dropdown Item 1
    • Dropdown Item 2
    • Dropdown Item 3
    • Dropdown Item 4
    • Dropdown Item 5
     
    <div class="uikit-component uk-button-group">
        <a href="#" class="button" title="Dropdown Button"><span class="name">Dropdown Arrow Trigger</span></a>
        <div class="uikit-dropdown" data-uk-dropdown="{mode:'click'}">
            <a href="#" class="button uikit-trigger" title="Dropdown Arrow Trigger"><span class="icon right"></span></a>
            <div class="uk-dropdown ">
                <ul class="menu">
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  • View the code

    UIKit Dropdown with Delay

    Dropdown Trigger
    • Dropdown Item 1
    • Dropdown Item 2
    • Dropdown Item 3
    • Dropdown Item 4
    • Dropdown Item 5
     
    <div class="uikit-component">
        <div class="uikit-dropdown" data-uk-dropdown="{delay: 1000}">
            <a href="#" class="button uikit-trigger" title="Dropdown Trigger">Dropdown Trigger <span class="icon right"></span></a>
            <div class="uk-dropdown">
                <ul class="menu">
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  • View the code

    UIKit Up Dropdown

    Dropdown Trigger
    • Dropdown Item 1
    • Dropdown Item 2
    • Dropdown Item 3
    • Dropdown Item 4
    • Dropdown Item 5
     
    <div class="uikit-component">
        <div class="uikit-dropdown dropdown-up" data-uk-dropdown>
            <a href="#" class="button uikit-trigger" title="Dropdown Trigger">Dropdown Trigger <span class="icon right"></span></a>
            <div class="uk-dropdown uk-dropdown-up">
                <ul class="menu">
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  • View the code

    UIKit Justified Dropdown

    Dropdown Trigger
    • Dropdown Item 1
    • Dropdown Item 2
    • Dropdown Item 3
    • Dropdown Item 4
    • Dropdown Item 5
     
    <div class="uikit-component">
        <div class="uikit-dropdown" data-uk-dropdown="{justify:'#uikit-dropdown'}">
            <a href="#" class="button uikit-trigger" title="Dropdown Trigger">Dropdown Trigger <span class="icon right"></span></a>
            <div class="uk-dropdown">
                <ul class="menu">
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 1">Dropdown Item 1</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 2">Dropdown Item 2</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 3">Dropdown Item 3</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 4">Dropdown Item 4</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link" title="Dropdown Item 5">Dropdown Item 5</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  • View the code this component uses the dateTime function which you can find in the js/main.js file from your framework root directory
     
    <span class="time"></span>
  • View the code this component uses the dateTime function which you can find in the js/main.js file from your framework root directory
     
    <span class="date"></span>
  • View the code this component uses the dateTime function which you can find in the js/main.js file from your framework root directory  – 
     
    <span class="datetime">
        <span class="date"></span><span> – </span><span class="time"></span>
    </span>
    • Generic
    • Showcase
    • View the code this component uses the showContent function which you can find in the js/main.js file from your framework root directory

      Show / Hide Part of Element

      • list item
      • list item
      • list item
      • list item
      • list item
      • list item
      • list item
      show content
       
      <div class="show-all">
          <ul class="content list">
              <li class="item first">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item last">
                  list item
              </li>
          </ul>
          <a class="button trigger" href="#" title="Show the Hidden Content">show content</a>
      </div>
    • View the code

      Show the Entire Article Excerpt

      Lorem ipsum dolor sit amet

      posted on in Web Design

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

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

      read the entire article
      show full excerpt
       
      <h4>Show the Entire Article Excerpt</h4>
          <div class="show-all">
              <div class="article featured">
                  <h3 class="title"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h3>
                  <span class="details">
                      <small class="posted">posted on <span class="date"></span> in <a href="#" class="link category">Web Design</a></small>
                  </span>
                  <div class="excerpt">
                      <p><img class="left" src="img/base/sample-thumb.jpg" width="272" height="180" alt="Image Alt" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus. Donec vulputate nunc non arcu vehicula pretium. Mauris sollicitudin porta nisl.</p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor interdum rutrum. Aliquam dictum sollicitudin lectus a ornare. Quisque faucibus ipsum sapien, sit amet pharetra est suscipit at. Fusce sit amet pretium est, vel tincidunt risus.</p>
                  </div>
                  <a href="#" class="read" title="Read the full article">read the entire article <span class="icon"></span></a>
              </div>
              <a class="button trigger" href="#" title="Show the Entire Article Excerpt">show full excerpt</a>
          </div>
    • Generic
    • Showcase
    • View the code this component uses the showContent function which you can find in the js/main.js file from your framework root directory

      Show / Hide More Elements

      • list item
      • list item
      • list item
        • hidden list item
        • hidden list item
        • hidden list item
      show content
       
      <div class="show-more">
          <ul class="content list">
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item">
                  list item
              </li>
              <li class="item hidden">
                  <ul class="list">
                      <li class="item">
                          hidden list item
                      </li>
                      <li class="item">
                          hidden list item
                      </li>
                      <li class="item">
                          hidden list item
                      </li>
                  </ul>
              </li>
          </ul>
          <a class="button trigger" href="#" title="Show the Hidden Content">show content</a>
      </div>
    • View the code

      Show More Articles

      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
        • 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
      Show all Articles
       
      <h4>Show More Articles</h4>
      <div class="articles-section show-more">
          <h2>Articles</h2>
          <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 class="item hidden">
                  <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>
                  </ul>
              </li>
          </ul>
          <a class="button trigger" href="#" title="Show all Articles">Show all Articles</a>
      </div>
    • Generic
    • Showcase
    • View the code

      Vertical Element Controls

       
      <ul class="controls">
          <li class="item minimize">
              <a class="link" href="#" title="Minimize"><span class="icon"></span></a>
          </li>
          <li class="item options">
              <a class="link" href="#" title="Options"><span class="icon"></span></a>
          </li>
          <li class="item close">
              <a class="link" href="#" title="Close"><span class="icon"></span></a>
          </li>
      </ul>
    • View the code
      • 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 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.

       
      <div class="comments">
          <ul class="list">
              <li class="item">
                  <section class="comment">
                      <aside class="left commenter">
                          <img class="avatar" src="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="controls">
                              <li class="item reply">
                                  <a href="#" class="link" title="Reply this comment"><span class="icon"></span></a>
                              </li>
                              <li class="item like">
                                  <a href="#" class="link" title="Like this comment"><span class="icon"></span></a>
                              </li>
                              <li class="item report">
                                  <a href="#" class="link" title="Report this comment"><span class="icon"></span></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">
                      <aside class="left commenter">
                          <img class="avatar" src="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="controls">
                              <li class="item reply">
                                  <a href="#" class="link" title="Reply this comment"><span class="icon"></span></a>
                              </li>
                              <li class="item like">
                                  <a href="#" class="link" title="Like this comment"><span class="icon"></span></a>
                              </li>
                              <li class="item report">
                                  <a href="#" class="link" title="Report this comment"><span class="icon"></span></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>
    • Generic
    • Showcase
    • View the code

      Horizontal Element Controls

       
      <ul class="controls-horizontal">
          <li class="item minimize">
              <a class="link" href="#" title="Minimize"><span class="icon"></span></a>
          </li>
          <li class="item options">
              <a class="link" href="#" title="Options"><span class="icon"></span></a>
          </li>
          <li class="item close">
              <a class="link" href="#" title="Close"><span class="icon"></span></a>
          </li>
      </ul>
    • View the code
      Profile Settings
       
      <div class="box closable slide">
          <header>
              Profile Settings
              <ul class="controls-horizontal">
                  <li class="item">
                      <a class="link trigger" href="#" title="Minimize"><span class="icon"></span></a>
                  </li>
                  <li class="item options">
                      <a class="link" href="#" title="Options"><span class="icon"></span></a>
                  </li>
                  <li class="item close">
                      <a class="link" href="#" title="Close"><span class="icon"></span></a>
                  </li>
              </ul>
          </header>
          <div class="content">
              <form class="form-validate" action="your-script" method="POST">
                  <fieldset>
                      <div class="group">
                          <label for="name">Name</label>
                          <input type="text" class="input text" name="name" placeholder="name" id="name3" required />
                      </div>
                      <div class="group">
                          <label for="surname">Surname</label>
                          <input type="text" class="input text" name="surname" placeholder="surname" id="surname3" />
                      </div>
                      <div class="group input-wrapper multiple">
                          <label>Profile Photo</label>
                          <input type="text" class="input text" name="text" value="Choose a file" disabled="disabled" />
                          <label for="file-input" class="button file">Profile Photo <span class="icon right"></span></label><input type="file" class="input" name="file" id="file-input3" />
                      </div>
                  </fieldset>
                  <button type="submit" class="input button">save changes</button>
              </form>
          </div>
      </div>
  • View the code

    Left-Positionated Element Controls

     
    <ul class="controls left">
        <li class="item minimize">
            <a class="link" href="#" title="Minimize"><span class="icon"></span></a>
        </li>
        <li class="item options">
            <a class="link" href="#" title="Options"><span class="icon"></span></a>
        </li>
        <li class="item close">
            <a class="link" href="#" title="Close"><span class="icon"></span></a>
        </li>
    </ul>
    • Generic
    • Showcase
    • View the code

      UIKit Toggle

      Toggle Content

      Content in Here

       
      <div class="uikit-component">
          <a href="#" class="button trigger" data-uk-toggle="{target:'#uikit-toggle'}">Toggle Content</a>
          <div id="uikit-toggle" class="content">
              <p>Content in Here</p>
          </div>
      </div>
    • View the code
      Toggle Description

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam.

       
      <div class="uikit-component">
          <a href="#" class="button trigger" data-uk-toggle="{target:'#uikit-toggle-example'}">Toggle Description</a>
          <div id="uikit-toggle-example" class="content">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam. </p>
          </div>
      </div>
  • View the code

    UIKit Multiple Toggle

    Toggle Between Items

    Content of Item 1

    Content of Item 2

     
    <div class="uikit-component">
        <a href="#" class="button trigger" data-uk-toggle="{target:'.toggle-item'}">Toggle Between Items</a>
        <div class="content toggle-item">
            <p>Content of Item 1</p>
        </div>
        <div class="content toggle-item uk-hidden">
            <p>Content of Item 2</p>
        </div>
    </div>
  • View the code

    UIKit Class Toggle

    Toggle Class

    Content with Custom Class

     
    <div class="uikit-component">
        <a href="#" class="button trigger" data-uk-toggle="{target:'#uikit-toggle-class', cls:'background-red'}">Toggle Class</a>
        <div id="uikit-toggle-class" class="content">
            <p>Content with Custom Class</p>
        </div>
    </div>
  • View the code

    UIKit Nestable Items

    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
     
    <div class="uikit-component">
        <ul class="uk-nestable" data-uk-nestable>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 1</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 2</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 3</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 4</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 5</span>
                </div>
            </li>
        </ul>
    </div>
  • View the code

    UIKit Nestable Items with Multiple Lists

    First List
    • Item 1
    • Item 2
    • Item 3
    Second List
    • Item 4
    • Item 5
    • Item 6
     
    <div class="uikit-component">
        <span>First List</span>
        <ul class="uk-nestable" data-uk-nestable="{group: 'my-group'}">
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 1</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 2</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 3</span>
                </div>
            </li>
        </ul>
        <span>Second List</span>
        <ul class="uk-nestable" data-uk-nestable="{group: 'my-group'}">
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 4</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 5</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 6</span>
                </div>
            </li>
        </ul>
    </div>
  • View the code

    UIKit Nestable with Disabled Nesting

    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
     
    <div class="uikit-component">
        <ul class="uk-nestable" data-uk-nestable="{maxDepth: 2}">
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 1</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 2</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 3</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 4</span>
                </div>
            </li>
            <li class="item">
                <div class="uk-nestable-item">
                    <span class="uk-nestable-handle"></span>
                    <span data-nestable-action="toggle" class="toggle-nestable"></span>
                    <span class="content">Item 5</span>
                </div>
            </li>
        </ul>
    </div>
  • View the code

    UIKit Sortable

    Col 1 Row 1 Content
    Col 2 Row 1 Content
    Col 3 Row 1 Content
    Col 4 Row 1 Content
    Col 5 Row 1 Content
    Col 1 Row 2 Content
    Col 2 Row 2 Content
    Col 3 Row 2 Content
    Col 4 Row 2 Content
    Col 5 Row 2 Content
     
    <div class="uikit-component">
        <div class="grid-5 uk-sortable" data-uk-sortable>
            <div class="box background-red cell">
                <div class="content">Col 1 Row 1 Content</div>
            </div>
            <div class="box background-green cell">
                <div class="content">Col 2 Row 1 Content</div>
            </div>
            <div class="box background-blue cell">
                <div class="content">Col 3 Row 1 Content</div>
            </div>
            <div class="box background-yellow cell">
                <div class="content">Col 4 Row 1 Content</div>
            </div>
            <div class="box background-orange cell">
                <div class="content">Col 5 Row 1 Content</div>
            </div>
            <div class="box background-pink cell">
                <div class="content">Col 1 Row 2 Content</div>
            </div>
            <div class="box background-purple cell">
                <div class="content">Col 2 Row 2 Content</div>
            </div>
            <div class="box background-brown cell">
                <div class="content">Col 3 Row 2 Content</div>
            </div>
            <div class="box background-red cell">
                <div class="content">Col 4 Row 2 Content</div>
            </div>
            <div class="box background-green cell">
                <div class="content">Col 5 Row 2 Content</div>
            </div>
        </div>
    </div>
  • View the code

    UIKit Sortable - Warp Mode

    Col 1 Row 1 Content
    Col 2 Row 1 Content
    Col 3 Row 1 Content
    Col 4 Row 1 Content
    Col 5 Row 1 Content
    Col 1 Row 2 Content
    Col 2 Row 2 Content
    Col 3 Row 2 Content
    Col 4 Row 2 Content
    Col 5 Row 2 Content
     
    <div class="uikit-component">
        <div class="grid-5 uk-sortable" data-uk-sortable="{warp:true}">
            <div class="box background-red cell">
                <div class="content">Col 1 Row 1 Content</div>
            </div>
            <div class="box background-green cell">
                <div class="content">Col 2 Row 1 Content</div>
            </div>
            <div class="box background-blue cell">
                <div class="content">Col 3 Row 1 Content</div>
            </div>
            <div class="box background-yellow cell">
                <div class="content">Col 4 Row 1 Content</div>
            </div>
            <div class="box background-orange cell">
                <div class="content">Col 5 Row 1 Content</div>
            </div>
            <div class="box background-pink cell">
                <div class="content">Col 1 Row 2 Content</div>
            </div>
            <div class="box background-purple cell">
                <div class="content">Col 2 Row 2 Content</div>
            </div>
            <div class="box background-brown cell">
                <div class="content">Col 3 Row 2 Content</div>
            </div>
            <div class="box background-red cell">
                <div class="content">Col 4 Row 2 Content</div>
            </div>
            <div class="box background-green cell">
                <div class="content">Col 5 Row 2 Content</div>
            </div>
        </div>
    </div>
Blackhole - Released under MIT license