---
layout: default
title: components · light7
---

<div class="docs-sub-header">
  {% include masthead.html %}
  <div class="container">
    <div class="docs-sub-content">
      <h2 class="page-title">Components</h2>
      <p class="page-description"> A set of powerful components with iOS style.</p>
    </div>
  </div>
</div>

<div class="container">
  <!-- Components -->
  <div class="docs-components column-group">
    {% include jump.html %}
    <div class="device-column column pull-right">
      <!-- In phone examples -->
      <div class="device js-device">
        <div class="device-content">
          <div id="iwindow">
            <header class="bar bar-nav">
              <h1 class="title">title</h1>
            </header>
          </div>
        </div>
      </div>
    </div>

    <div class="column docs-content docs-column">
      <!-- Bars -->
  {% include _components/layout.html %}
  {% include _components/rem.html %}
  {% include _components/init.html %}
  {% include _components/content.html %}
  {% include _components/type.html %}
  {% include _components/bar.html %}
  {% include _components/buttons.html %}
  {% include _components/forms.html %}
  {% include _components/panel.html %}
  {% include _components/searchbar.html %}
  {% include _components/tabs.html %}
  {% include _components/grid.html %}
  {% include _components/modal.html %}
  {% include _components/popup.html %}
  {% include _components/calendar.html %}
  {% include _components/actions.html %}
  {% include _components/picker.html %}
  {% include _components/list.html %}
  {% include _components/cards.html %}
  {% include _components/scroller.html %}
  {% include _components/pull-to-refresh.html %}
  {% include _components/infinite-scroll.html%}
  {% include _components/notification.html%}
  {% include _components/icons.html %}
  {% include _components/router.html %}
  {% include _components/themes.html %}


    <!-- Ratchicons -->
      <!-- Footer -->
      {% include footer.html %}
    </div>
  </div>
</div>