---
layout: examples
title: SUI Mobile Demo
---

<nav class="bar bar-tab">
  <a class="tab-item active no-transition replace" href='#page-home'>
    <span class="icon icon-home"></span>
    <span class="tab-label">Home</span>
  </a>
  <a class="tab-item no-transition replace" href="#page-goods">
    <span class="icon icon-app"></span>
    <span class="tab-label">Shops</span>
  </a>
  <a class="tab-item no-transition replace" href="#page-settings">
    <span class="icon icon-me"></span>
    <span class="tab-label">Me</span>
  </a>
</nav>

<div class="page page-home page-current" id="page-home">
  <header class="bar bar-nav">
    <a class="icon icon-settings pull-left open-panel"></a>
    <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
      About
      <span class="icon icon-menu"></span>
    </a>
    <h1 class="title">Light7 Mall</h1>
  </header>
  <div class="content pull-to-refresh-content page-home infinite-scroll">
    <style>
      .card-header {
        height: 10rem;
        overflow: hidden;
      }
    </style>
    <div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>
    </div>
    <div class="list">
      <a href='/examples/light7-mall/detail'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd1.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>DreamHome Square Poly Pillow Insert</p>
              <p class="color-gray">@2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">Like(120)</span>
            <span class="link">Comment(20)</span>
          </div>
        </div>
      </a>
      <a href='/examples/light7-mall/detail'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd2.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>AmazonBasics Yarn-Dyed Lightweight Flannel Duvet Cover - Full/Queen</p>
              <p class="color-gray">@2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">Like(120)</span>
            <span class="link">Comment(20)</span>
          </div>
        </div>
      </a>
      <a href='/examples/light7-mall/detail'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd2.alicdn.com/bao/uploaded/i2/TB1QtUmGVXXXXbgaXXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>Chezmoi Collection White Goose Down Alternative Comforter, Full/Queen with Corner Tab</p>
              <p class="color-gray">@2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">Like(120)</span>
            <span class="link">Comments(20)</span>
          </div>
        </div>
      </a>
    </div>
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
    <div style='display:none' id='index-tpl'>
      <a href='/examples/light7-mall/detail'>
        <div class="card color-default">
          <div style="" valign="bottom" class="card-header color-white no-border no-padding">
            <img class='card-cover' src="//gd4.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_640x640.jpg" alt="">
          </div>
          <div class="card-content">
            <div class="card-content-inner">
              <p>My Pillow Classic Series Bed Pillow - Standard/Queen King Pillows</p>
              <p class="color-gray">@2015/01/15</p>
            </div>
          </div>
          <div class="card-footer">
            <span class="link">Like(120)</span>
            <span class="link">Comments(20)</span>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
<div id="page-goods" class="page page-goods">
  <div class="content infinite-scroll">
    <div class="swiper-container swiper-container-horizontal" data-space-between="10">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_640x640.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img class='card-cover' src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_640x640.jpg" alt="">
        </div>
      </div>
      <div class="swiper-pagination"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
    </div>
    <div class="list-block media-list">
      <ul>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">SoundAsleep Products</div>
                <div class="item-after">$120</div>
              </div>
              <div class="item-subtitle">203 Like</div>
              <div class="item-text">SoundAsleep Dream Series Air Mattress with ComfortCoil Technology</div>
            </div>
          </a>
        </li>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">J Pillow</div>
                <div class="item-after">$150</div>
              </div>
              <div class="item-subtitle">145 Like</div>
              <div class="item-text">J Pillow - Travel Pillow - Winner of British Invention of the Year 2013 - Consistently #1 BEST SELLING TRAVE</div>
            </div>
          </a>
        </li>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Rozene</div>
                <div class="item-after">$120</div>
              </div>
              <div class="item-subtitle">345 Like</div>
              <div class="item-text">WayHomeDecor Cotton Linen Decorative Throw Pillow Case Cushion Cover Cute </div>
            </div>
          </a>
        </li>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i1/TB1kzlgHVXXXXbtXpXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">SoundAsleep Products</div>
                <div class="item-after">$120</div>
              </div>
              <div class="item-subtitle">203 Like</div>
              <div class="item-text">SoundAsleep Dream Series Air Mattress with ComfortCoil Technology</div>
            </div>
          </a>
        </li>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i2/TB1mEnmHXXXXXXHapXXXXXXXXXX_!!0-item_pic.jpg_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">J Pillow</div>
                <div class="item-after">$150</div>
              </div>
              <div class="item-subtitle">145 Like</div>
              <div class="item-text">J Pillow - Travel Pillow - Winner of British Invention of the Year 2013 - Consistently #1 BEST SELLING TRAVE</div>
            </div>
          </a>
        </li>
        <li>
          <a href="/examples/light7-mall/detail" class="item-link item-content">
            <div class="item-media"><img src="//gdp.alicdn.com/bao/uploaded/i4/TB13mgfHpXXXXcVXFXXXXXXXXXX_!!2-item_pic.png_240x240.jpg" width="80"></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">Rozene</div>
                <div class="item-after">$120</div>
              </div>
              <div class="item-subtitle">345 Like</div>
              <div class="item-text">WayHomeDecor Cotton Linen Decorative Throw Pillow Case Cushion Cover Cute </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="infinite-scroll-preloader">
      <div class="preloader"></div>
    </div>
  </div>
</div>
<div id="page-settings" class="page page-settings">
  <header class="bar bar-nav">
    <h1 class="title">Settings</h1>
  </header>

  <div class="content">
    <div class="page-settings">
      <div class="list-block media-list person-card">
        <ul>
          <li>
            <div href="#" class="item-content">
              <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="80"></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Mr Potato</div>
                </div>
                <div class="item-subtitle">Time is money</div>
                <div class="item-text"><strong>528</strong> Follow</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="row text-center">
        <div class="col-25">
          <h4>12</h4>
          <div class="color-gray">in Cart</div>
        </div>
        <div class="col-25">
          <h4>5</h4>
          <div class="color-gray">Sent</div>
        </div>
        <div class="col-25">
          <h4>2</h4>
          <div class="color-gray">Delivery</div>
        </div>
        <div class="col-25">
          <h4>85</h4>
          <div class="color-gray">Comments</div>
        </div>
      </div>
      <div class="list-block list">
        <ul>
          <li class="item-content item-link">
            <div class="item-media"><i class="icon icon-settings"></i></div>
            <div class="item-inner">
              <div class="item-title">Account</div>
            </div>
          </li>
          <li class="item-content item-link">
            <div class="item-media"><i class="icon icon-me"></i></div>
            <div class="item-inner">
              <div class="item-title">Me</div>
            </div>
          </li>
          <li class="item-content item-link">
            <div class="item-media"><i class="icon icon-message"></i></div>
            <div class="item-inner">
              <div class="item-title">Noti</div>
            </div>
          </li>
          <li class="item-content item-link">
            <div class="item-media"><i class="icon icon-star"></i></div>
            <div class="item-inner">
              <div class="item-title">Fav</div>
            </div>
          </li>
          <li class="item-content item-link">
            <div class="item-media"><i class="icon icon-friends"></i></div>
            <div class="item-inner">
              <div class="item-title">Help</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content-block">
        <a href="/examples/light7-mall/index.html" class="button button-big button-fill button-danger external">Logout</a>
      </div>
    </div>
  </div>
</div>

<div class="popup popup-about">
  <div class="content-block">
    <h2 class="text-center">About Light7 Mall</h2>
    <p>It's a demo webapp of Light7.</p>
    <p><a href="#" class="button close-popup">OK</a></p>
  </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal theme-dark" id='panel-themes'>
  <div class="content-block">
    <p>Themes</p>
    <div class="list-block">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title label" style='width: 60%;'>Night Mode</div>
              <div class="item-input">
                <label class="label-switch">
                  <input type="checkbox" id="dark-switch">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>