Web Components Library

Homepage Features Buttons

No notes defined.

<div class="relative bg-gray-300 py-12">

    <div class="absolute inset-0 bg-top grayscale opacity-50" style="background: url('/dist/images/temp/Lake-Louise-Winter-Large.jpeg')"></div>

    <div class="absolute inset-0 bg-gray-300 opacity-50"></div>

    <div class="relative max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 px-4">

        <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">
                <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">
                <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">
                <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>

</div>
 
{{!--{# Homepage features buttons section #}--}}

<div class="relative bg-gray-300 py-12">

  <div class="absolute inset-0 bg-top grayscale opacity-50"
       style="background: url('/dist/images/temp/Lake-Louise-Winter-Large.jpeg')"></div>

  <div class="absolute inset-0 bg-gray-300 opacity-50"></div>

  <div class="relative max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 px-4">

    {{> @mtl-button-feature-with-icon }}
    {{> @mtl-button-feature-with-icon }}
    {{> @mtl-button-feature-with-icon }}
    {{> @mtl-button-feature-with-icon }}

  </div>

</div>
 
/* No context defined. */