Gigaclear Pattern Library

Search Button 

<button class="block w-5 h-5 lg:w-4 lg:h-4" data-micromodal-trigger="search-modal">
    <span class="sr-only">
        Open Search Modal
    </span>
    <svg class="fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha" aria-hidden="true">
        <use href="/front-end/sprite.svg?v=1.2#icon-search"></use>
    </svg>
</button>
 
<button class="block w-5 h-5 lg:w-4 lg:h-4" data-micromodal-trigger="search-modal">
    <span class="sr-only">
        Open Search Modal
    </span>
    {% render "@icon", { name: "icon-search", modifier: "fill-current w-full h-full text-bravo transition-colors ease-in-out duration-300 hover:text-alpha", ariaHidden: true } %}
</button>
 
{
  "siteName": "Gigaclear Pattern Library"
}
  • Handle: @search-button
  • Preview:
  • Filesystem Path: fractal\components\01-micro\_search-button\search-button.nunjucks
  • References (1): @icon

No notes defined.