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

<div class="docs-sub-header">
  {% include masthead.html %}
  <div class="container">
    <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>
    {% include ad.html %}
  </div>
</div>

<div class="container">
  <div class="column-group">
    <div class="column lg-units-8 docs-examples docs-content">

      <p class="lead">Checkout out the examples on a desktop browser or visit on your mobile device see the apps as intended.</p>

      <div class="column-group">
        <div class="column lg-units-4">
          <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>
            <h4 class="example-title">Movie finder</h4>
          </div>
        </div>
        <div class="column lg-units-4">
          <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>
            <h4 class="example-title">iOS mail app</h4>
          </div>
        </div>
        <div class="column lg-units-4">
          <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>
            <h4 class="example-title">Android notes app</h4>
          </div>
        </div> <!-- .column-group -->
      </div>
    </div>

    <div class="column lg-units-4">
      {% include download-module.html %}
    </div>
  </div>

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