---
title: Built with
permalink: /built-with/index.html
description: 'A list of sites based on / built with Eleventy Excellent. Add yours by submitting a pull request!'
layout: page
sizes: '(max-width: 615px) 50vw, 100vw'
widths: [400, 520]
---

<p>
  A list of sites based on / built with Eleventy Excellent. This uses Eleventy's
  <a href="https://www.11ty.dev/docs/services/screenshots/">screenshot API </a>. New
  screenshots are fetched in development only.
</p>

<p>
  Have you built a site with this starter? Please let me know or create a
  <a
    href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request"
    rel="noopener"
    >pull request</a
  >
  and add it to the list! You find the data in <code>src/_data/builtwith.json</code> (Not
  related to "Build with Jason" 🥁).
</p>
<article class="full section" style="--spot-color: var(--color-bg-accent)">
  {% include 'svg/divider-soft-top.svg' %}

  <section class="section__inner wrapper">
    <h2>Based on, or built with Eleventy Excellent:</h2>
    <ul class="feature grid" role="list" style="--gutter: var(--space-xl) var(--space-m)">
      <!-- you find tha data for that in src/_data/builtwith.json -->
      {% for site in builtwith | shuffle %}
        <li class="grid-card | text-step-min-1">
          {% eleventyImage "./src/assets/images/screenshots/" + site.filename + ".jpg", site.name, null, "lazy", null, sizes, widths %}

          <p>{{ site.description }}</p>

          <p>
            <a href="{{ site.link }}">{{ site.link | replace("https://", "") }}</a>
          </p>
        </li>
      {% endfor %}
    </ul>
  </section>

  {% include 'svg/divider-soft-bottom.svg' %}
</article>