<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    {% for key, name in colors %}
        <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
            <div class="border-color-{{ key }}" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
            <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
                <strong style="display: block;">{{ name }}</strong>
                <code>.border-color-{{ key }}</code>
            </p>
        </li>
    {% endfor %}
</ul>
