---
layout: demo
title: SUI Mobile Demo
---
<div class="page theme-dark">
  <header class="bar bar-nav">
    <button class="button button-link button-nav pull-left">
      <span class="icon icon-left"></span>
      Back
    </button>
    <button class="button button-link button-nav pull-right">
      Next
      <span class="icon icon-right"></span>
    </button>
    <h1 class="title">Title</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">Fav</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="list-block">
      <ul>
        <!-- Text inputs -->
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-name"></i></div>
            <div class="item-inner">
              <div class="item-title label">Name</div>
              <div class="item-input">
                <input type="text" placeholder="Your name">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-email"></i></div>
            <div class="item-inner">
              <div class="item-title label">Email</div>
              <div class="item-input">
                <input type="email" placeholder="E-mail">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-password"></i></div>
            <div class="item-inner">
              <div class="item-title label">Password</div>
              <div class="item-input">
                <input type="password" placeholder="Password" class="">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-gender"></i></div>
            <div class="item-inner">
              <div class="item-title label">Gender</div>
              <div class="item-input">
                <select>
                  <option>Male</option>
                  <option>Female</option>
                </select>
              </div>
            </div>
          </div>
        </li>
        <!-- Date -->
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-calendar"></i></div>
            <div class="item-inner">
              <div class="item-title label">Birthday</div>
              <div class="item-input">
                <input type="date" placeholder="Birth day" value="2014-04-30">
              </div>
            </div>
          </div>
        </li>
        <!-- Switch (Checkbox) -->
        <li>
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-toggle"></i></div>
            <div class="item-inner">
              <div class="item-title label">Noti</div>
              <div class="item-input">
                <label class="label-switch">
                  <input type="checkbox">
                  <div class="checkbox"></div>
                </label>
              </div>
            </div>
          </div>
        </li>
        <li class="align-top">
          <div class="item-content">
            <div class="item-media"><i class="icon icon-form-comment"></i></div>
            <div class="item-inner">
              <div class="item-title label">Description</div>
              <div class="item-input">
                <textarea></textarea>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block">
      <div class="row">
        <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
        <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
      </div>
    </div>
    <div class="card demo-card-header-pic">
      <div valign="bottom" class="card-header color-white no-border no-padding">
        <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
      </div>
      <div class="card-content">
        <div class="card-content-inner">
          <p class="color-gray">@ 2015/01/15</p>
          <p>Contents here...</p>
        </div>
      </div>
      <div class="card-footer">
        <a href="#" class="link">Star</a>
        <a href="#" class="link">More</a>
      </div>
    </div>
  </div>
</div>