examples.html

---
layout: default
title: Example visualizations and dashboards | Metabase
image: /images/opengraph/learn/index.png
summary: "Explore real life examples built by real Metabase users."
---

<div class="bootstrap">
  <div class="public-metabase-examples index-page">
    <div class="hero">
      <h2>Powered by Metabase</h2>
      <h1>Example visualizations<br />and dashboards</h1>
      <h3>Explore real life examples built by real Metabase users.<br />Got something great you want to feature here? <a href="/examples/submit">Share it with us.</a></h3>
    </div>

    <div>
      <div class="picker">
        <div class="hover-highlight hidden"></div>
        <div class="picker-slider">
          {% for category in site.data.public-metabase-example-categories %}
            {% if category.show == true %}
              <button>{% include svg-icons/{{ category.icon }}.html %}{{ category.name }}</button>
            {% endif %}
          {% endfor %}
        </div>
      </div>

      <div class="entries">
        {% for example in site.examples reversed %}
          <a href="{{ example.url }}" class="entry" data-categories="{{ example.categories }}">
            <div>
              <img src="{{ example.thumbnail }}" alt="{{ example.author }}">
            </div>
            <div>
              <button data-url="{{ example.dashboard_url }}">{% include svg-icons/link-modern.html stroke="#509ee3" width=28 height=28 %}</button>
              <h4>{{ example.name }}</h4>
              <h5>{{ example.author }}</h5>
            </div>
          </a>
        {% endfor %}

        <a href="/examples/submit" class="cta">
          <p>Got something great you want to feature here?</p>
          <button>Share it with us</button>
        </a>
      </div>
    </div>
  </div>
  <div class="data-sources-footer">
    {% include public-metabase-examples/try-metabase-footer-index-page.html %}
  </div>
</div>

<script type="text/javascript" src="/js/public-metabase-examples.js"></script>