a17t/docs/_layouts/element.html

Atomic design toolkit. Build beautiful interfaces without reinventing the wheel. Tailwind CSS plugin.

---
layout: default
---

<div class="flex flex-wrap justify-between">
  <section class="self-start w-full md:w-1/3 md:pr-12 md:sticky mh-auto" style="top: 3rem;">
    <h1 class="text-5xl heading text-urge-600 page-name mt-1">{{page.title}}</h1>
    <p class="text-lg subheading mt-2">{{page.description}}</p>
    <hr class="sep">
    <ul class="flex flex-wrap justify-between md:block">
      {% if page.display %}
      <li class="mb-4">
        <p class="label">Display</p>
        <p>{{page.display}}</p>
      </li>
      {% endif %}
      {% if page.selectors %}
      <li class="mb-4">
        <p class="label">Selectors</p>
        {% for selector in page.selectors %}<code class="block my-px">{{selector}}</code>{% endfor %}
      </li>
      {% endif %}
      {% if page.source %}
      <li class="mb-4">
        <p class="label">Source</p>
        <p><a href="{{page.source}}" class="p-0 font-normal portal">GitHub &nearr;</a></p>
      </li>
      {% endif %}
      {% if page.features %}
      <li class="w-full mb-4">
        <p class="label">Features</p>
        <p>{% for feature in page.features %}<span class="chip ~positive mr-1 mb-1">{{feature}}</span>{% endfor %}
        </p>
      </li>
      {% endif %}
    </ul>
  </section>
  <article class="w-full mt-4 md:w-2/3">
    {% if page.examples %}
    {% for example in page.examples %}
    <div class="card bg-white mb-4">
      {{example}}
      <div class="mt-6 overflow-auto text-sm" style="max-height: 20rem;">
        {% highlight html %}{{example}}{% endhighlight %}
      </div>
    </div>
    {% endfor %}
    <hr class="sep">
    {% endif %}
    <main class="content ~neutral">
      {{content}}
    </main>
  </article>
</div>