---
layout: default
title: Examples
---

<div class="container">

  <div class="grid" style="padding-top:100px;">
    <div class="unit whole" style="text-align: center">
      <img src="/N1/images/watercolor_package.png" style="
          width: 200px;
          margin: auto;
          display: block;
      ">
      <h2>Featured Plugins</h2>
    </div>
  </div>

  <div class="grid">
    {% for example in site.collections.examples.docs %}
      <div class="half unit" style="padding-left:10px; padding-right:10px;">
        <div class="example-item">
          <div class="example-item-image">
            <a href="{{ example.github }}"><img src="{{ example.image }}"></a>
          </div>
          <div>
            <h4 style="margin-top:10px;">
              <a href="{{ example.github }}">{{ example.title }}</a>
            </h4>
          </div>
          <div class="example-item-description">
            {{ example.description }}
          </div>
          <div class="example-item-assumed-experience">
            <span class="example-item-assumed-experience-badge">Assumed experience:</span>
            {{ example.assumed_experience }}
          </div>
          <div class="example-item-links">
            <span>
              <a href="{{ site.baseurl }}{{ example.url }}">Annotated source</a>
            </span>
            <span style="float:right;">
              <a href="{{ example.github }}" class="github">View on GitHub</a>
            </span>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

</div>