---
layout: default
title: Examples · Ratchet
---

<div class="docs-sub-header">
  {% include masthead.html %}
  <div class="container">
    <div class="column-group">
      <div class="column units-2">
        <div class="docs-sub-content">
          <h2 class="page-title">Examples</h2>
          <p class="page-description">Take a look at some of these example apps built on Ratchet.</p>
        </div>
      </div>
    </div>
    {% include ad.html %}
  </div>
</div>

<div class="container">
  <div class="column-group">
    <div class="column units-2 lg-units-8 docs-examples">
      <p class="section-lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>
      
      <div class="docs-example-group">
        <div class="example-wrap">
          <a class="example" href="../examples/app-movies" data-ignore="push">
            <img src="../assets/img/example.png" alt="Movie finder app example" width="640" height="480">
          </a>
          <h5>Movie finder</h5>
        </div>
        <div class="example-wrap">
          <a class="example" href="../examples/app-ios-mail" data-ignore="push">
            <img src="../assets/img/example-ios.png" alt="iOS mail app example" width="640" height="480">
          </a>
          <h5>iOS mail app</h5>
        </div>
        <div class="example-wrap">
          <a class="example" href="../examples/app-android-notes" data-ignore="push">
            <img src="../assets/img/example-android.png" alt="Android notes app example" width="640" height="480">
          </a>
          <h5>Android notes app</h5>
        </div>
      </div>
    </div>
    <div class="column units-2 lg-units-4">
      {% include download-module.html %}
    </div>
  </div>

  <div class="column units-2">
    <!-- Footer -->
    {% include footer.html %}
  </div>
</div>