Web Components Library

Button Feature With Icon

No notes defined.

<div class="border border-white p-1">
    <a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
        <svg class="fill-current h-10 w-10 text-gray-200" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
            <g fill-rule="evenodd" fill="none">
                <path d="M-2-3h24v24H-2Z" />
                <path fill="currentColor" d="M5 5a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4Zm4.15 4H20v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V9h3v-.75C3 7.01 4.01 6 5.25 6h.03c.34 0 .67.09.96.23.26.12.5.29.69.5l1.4 1.55c.23.26.51.5.82.72ZM5 17v-6H3v6h2Zm4 0v-6H7v6h2Zm4 0v-6h-2v6h2Zm4 0v-6h-2v6h2ZM15.42 4.21l-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H16l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Zm-4-.001-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H12l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Z" />
            </g>
        </svg>
        <h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
            Heading
        </h2>
    </a>
</div>
 
<div class="border border-white p-1">
    <a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
        {{> @mtl-icon-hot-tub }}

         <h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
             Heading
        </h2>
    </a>
</div>
 
/* No context defined. */