MentorKit Pattern Library

Search Modal 

<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" aria-hidden="true" data-vanilla-module="Modal">
    <div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
        <div class="js-model-content w-full md:max-w-screen-md m-auto" role="dialog" aria-modal="true">
            <div class="flex justify-end pb-4">
                <button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
                    <svg class="fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none">
                        <use href="/front-end/sprite.svg#icon-close"></use>
                    </svg>
                    <span class="sr-only">Close Search Modal</span>
                </button>
            </div>
            <div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-md" role="dialog" aria-modal="true">
                <main class="w-full">
                    <form action="./search-results.html" class="pb-2">
                        <label class="block text-center text-4xl mb-2 text-bravo" for="modalSearchTerm">Search</label>
                        <div class="flex justify-center w-full items-stretch">
                            <div class="flex-1 mr-4">
                                <input class="w-full p-4 focus:ring-0 border-0 transition-colors focus:border-0 ease-in-out duration-300 focus:outline-none bg-grey-100" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
                            </div>
                            <button>
                                <span class="sr-only">Search site</span>
                                <div class="w-6 h-6">
                                    <svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha">
                                        <use href="/front-end/sprite.svg#icon-search"></use>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </form>
                </main>
            </div>
        </div>
    </div>
</div>
 
<div class="fixed bg-black/70 z-50 -inset-0 hidden overflow-auto" id="search-modal" aria-hidden="true" data-vanilla-module="Modal">
    <div tabindex="-1" class="w-full h-full flex px-4 py-12 lg:px-8" data-micromodal-close>
        <div class="js-model-content w-full md:max-w-screen-md m-auto" role="dialog" aria-modal="true">
            <div class="flex justify-end pb-4">
                <button class="w-10 h-10 border-white group transition ease-in-out duration-300 hover:bg-white border rounded-full z-20 flex items-center justify-center" aria-label="Close modal" data-micromodal-close>
                    {% render "@icon", { name: "icon-close", modifier: "fill-current w-5 h-5 text-white group-hover:text-bravo pointer-events-none" } %}
                    <span class="sr-only">Close Search Modal</span>
                </button>
            </div>
            <div class="js-model-content flex flex-col items-center justify-center z-10 relative bg-white p-8 shadow-xl w-full rounded-md" role="dialog" aria-modal="true">
                <main class="w-full">
                    <form action="{{ './search-results' | path }}" class="pb-2">
                        <label class="block text-center text-4xl mb-2 text-bravo" for="modalSearchTerm">Search</label>
                        <div class="flex justify-center w-full items-stretch">
                            <div class="flex-1 mr-4">
                                <input class="w-full p-4 focus:ring-0 border-0 transition-colors focus:border-0 ease-in-out duration-300 focus:outline-none bg-grey-100" id="modalSearchTerm" name="searchTerm" placeholder="Search term" type="text" value="">
                            </div>
                            <button>
                                <span class="sr-only">Search site</span>
                                <div class="w-6 h-6">
                                    {% render "@icon", { name: "icon-search", modifier: "fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha" } %}
                                </div>
                            </button>
                        </div>
                    </form>
                </main>
            </div>
        </div>
    </div>
</div>
 
{
  "siteName": "MentorKit Pattern Library"
}

No notes defined.