---
layout: demo
title: Light7 Demo
---
<div class="page" id='page-colors'>
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/demos">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Color Themes</h1>
  </header>
  <nav class="bar bar-tab">
    <a class="tab-item active" href="#">
      <span class="icon icon-home"></span>
      <span class="tab-label">Home</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-me"></span>
      <span class="tab-label">Me</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-star"></span>
      <span class="tab-label">Star</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-cart"></span>
      <span class="tab-label">Cart</span>
    </a>
    <a class="tab-item" href="#">
      <span class="icon icon-settings"></span>
      <span class="tab-label">Settings</span>
    </a>
  </nav>
  <div class="content">
    <div class="content-block-title">Click to select different color theme</div>
    <div class="content-block">
      <p class="buttons-row select-color">
        <a href="#" class="button tab-link active" data-color=''>Default</a>
        <a href="#" class="button tab-link" data-color='pink'>Pink</a>
        <a href="#" class="button tab-link" data-color='green'>Green</a>
        <a href="#" class="button tab-link" data-color='yellow'>Yellow</a>
      </p>
    </div>
    <div class="content-block">
      <p><a href="#" class="button">Usual Button 1</a></p>
      <p><a href="#" class="button button-light">light button</a></p>
      <p><a href="#" class="button button-dark">dark button</a></p>
      <p><a href="#" class="button button-success">success button</a></p>
      <p><a href="#" class="button button-danger">danger button</a></p>
      <p><a href="#" class="button button-warning">warning button</a></p>
      <p><a href="#" class="button disabled">disabled button</a></p>
    </div>
    
  </div>
</div>