Web Components Library

Card Page Preview

No notes defined.

<div class="max-w-md">
    <a href="" class="group">
        <div class="relative">
            <div class="relative">
                <img class="h-full w-full object-center object-cover" src="https://picsum.photos/id/10/400/300" alt="Random Image">

            </div>
            <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
            <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
                <h3 class="text-xl sm:text-2xl text-white uppercase">
                    Special Offers
                </h3>
            </div>
        </div>
    </a>
</div>
 
<div class="max-w-md">
  <a href="{{ link }}" class="group">
    <div class="relative">
      <div class="relative">
        {{!--                                {% include '_includes/content/images/card-image.twig' %}--}}
        <img class="h-full w-full object-center object-cover"
           src="{{ image }}"
           alt="Random Image"
      >

      </div>
      <div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
      <div class="absolute inset-0 flex justify-center items-center border border-white m-1">
        <h3 class="text-xl sm:text-2xl text-white uppercase">
          {{ title }}
        </h3>
      </div>
    </div>
  </a>
</div>
 
{
  "title": "Special Offers",
  "image": "https://picsum.photos/id/10/400/300"
}