Gigaclear Pattern Library

Date Input 

<label class="block">
    <span class="text-bravo-900 mb-2 block font-bold lg:text-lg"></span>
    <div class="relative">
        <input type="text" class="
                        block
                        w-full
                        rounded-lg
                        border-grey-400
                        shadow-sm
                        p-4
                        default-focus focus-within:ring-black">
        <div class="absolute w-6 h-6 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
            <svg class="fill-current w-full h-full text-grey" aria-hidden="true">
                <use href="/front-end/sprite.svg?v=1.2#icon-calendar"></use>
            </svg>
        </div>
    </div>
</label>
 
<label class="block">
    <span class="text-bravo-900 mb-2 block font-bold lg:text-lg">{{label}}</span>
    <div class="relative">
        <input type="text" class="
                        block
                        w-full
                        rounded-lg
                        border-grey-400
                        shadow-sm
                        p-4
                        default-focus focus-within:ring-black">
        <div class="absolute w-6 h-6 right-2 top-2/4 -translate-y-2/4 pointer-events-none">
            {% render "@icon", { name: "icon-calendar", modifier: "fill-current w-full h-full text-grey", ariaHidden: true } %}
        </div>
    </div>
</label>
 
{
  "siteName": "Gigaclear Pattern Library"
}

No notes defined.