BIR Pattern Library

Date Input 

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

No notes defined.