Etat Pur Design System

Helper 

<div>
    <div class="flex flex-row items-center gap-x-1 text-body-xs text-black/40">
        <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>
        Helper text
    </div>
</div>
 
<div>
    {% if href is defined and href %}
        <a href="{{ href }}">
    {% endif %}
        <div class="flex flex-row items-center gap-x-1 text-body-xs {{ type == 'light' ? 'text-black/40' : 'text-white/64' }}">
            {% block helperIcon %}
                {% render "@icons-heroicons--question-mark-circle-outline" with {
                        height: '16',
                        width: '16',
                } %}
            {% endblock %}

            {{ label }}
        </div>
    {% if href is defined and href %}
        </a>
    {% endif %}
</div>
 
{
  "href": "",
  "type": "light",
  "label": "Helper text"
}

No notes defined.