patterns.html

---
layout: page
title: Patterns
description: An accessible widget & pattern library
permalink: patterns/
---

<nav class="toc-wrap toc-long" aria-labelledby="toc_title">
    <h2 id="toc_title" class="toc-title">Categories</h2>
    <ul class="toc">
        {% for category in site.data.patterns %}
        <li>
            <a class="{{ category.section-id }}" href="#{{category.section-id}}">
            {{ category.pattern-category }}
            </a>
        </li>
        {% endfor %}
    </ul>
</nav>

{% for category in site.data.patterns  %}
<section id="{{category.section-id}}" class="article-section patterns-section" tabindex="-1">
    <h3 class="article-section__title">{{ category.pattern-category }}</h3>
    <ul class="article-section__content">
      {% if category.sub-category %}
        <li>
          {{category.sub-category}}
          <ul>
            {% assign sorted_subcategory = category.sub-category-patterns | sort: 'title' %}
            {% for pattern in sorted_subcategory %}
              <li>
                <a href="{{ pattern.url }}" rel="external">
                  {{pattern.title}}
                </a>
              </li>
            {% endfor %}
          </ul>
        </li>
      {% endif %}
      {% assign sorted_category = category.patterns | sort: 'title' %}
      {% for pattern in sorted_category %}
        <li>
          <a href="{{ pattern.url }}" rel="external">
            {{pattern.title}}
          </a>
        </li>
      {% endfor %}
    </ul>
</section>
{% endfor %}