{% load ds_icons %}
<div class="w-[min(1024px,92vw)]">
    <div class="mb-6">
        <h2 class="text-lg font-medium text-slate-950">Iconography</h2>
        <p class="mt-1 text-sm text-slate-500">Auto-loaded from <code class="text-mini-medium">static/icons/design-system/manifest.json</code> and rendered via <code class="text-mini-medium">ds_icon</code>.</p>
    </div>

    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        {% for icon in design_icons %}
            <article class="rounded-8 border border-alpha-8 p-3">
                <div class="mb-2 inline-flex size-9 items-center justify-center rounded-6 bg-slate-100 text-slate-800">
                    {% ds_icon icon.name "size-5 text-slate-800" %}
                </div>
                <p class="truncate text-mini-medium text-slate-800">{{ icon.label }}</p>
                <p class="truncate text-mini text-slate-500">{{ icon.name }}</p>
            </article>
        {% endfor %}
    </div>
</div>