Web Components Library

Card

Cards

  • Using grid layout, with content-grow of heading and text, to keep buttons aligned
  • mobile card changes to a more compact format, with image and heading only
  • scale effect on hover
<a class="group sm:max-w-sm sm:flex" href="">

    <div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
        <img class="object-cover w-32 h-32 sm:h-48 sm:w-full" src="https://picsum.photos/id/10/400/300" alt="Random Image">

        <h3 class="flex items-center w-full px-6 my-6 text-2xl sm:text-center sm:justify-center capitalize text-gray-700">
            Heading
        </h3>

        <div class="flex-grow hidden px-6 sm:block">

            <p class="pb-8 mx-auto text-gray-600">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>

        </div>

        <div class="justify-center hidden mt-2 mb-10 sm:flex">

            <div class="inline-block px-4 py-2 mx-auto text-gray-500 uppercase border border-gray-300 group-hover:bg-gray-600 group-hover:text-white transition duration-200">
                Read More
            </div>

        </div>
    </div>

</a>
 
{{!-- Card, full card links to content --}}
<a class="group sm:max-w-sm sm:flex"
   href=""
>

  <div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
    {{!-- Image is square on small devices, full with on large devices --}}
    <img class="object-cover w-32 h-32 sm:h-48 sm:w-full"
         src="{{ image }}"
         alt="Random Image"
    >

    {{!-- Heading --}}
    <h3 class="flex items-center w-full px-6 my-6 text-2xl sm:text-center sm:justify-center capitalize text-gray-700">
      {{ heading }}
    </h3>

    {{!-- Main Content block, has flex-grow so that content section can expand and all cards have bottom button aligned --}}
    <div class="flex-grow hidden px-6 sm:block">

      <p class="pb-8 mx-auto text-gray-600">
        {{ text }}
      </p>

    </div>

    {{!-- Fake button at bottom, aligned on all cards --}}
    <div class="justify-center hidden mt-2 mb-10 sm:flex">

      <div class="inline-block px-4 py-2 mx-auto text-gray-500 uppercase border border-gray-300 group-hover:bg-gray-600 group-hover:text-white transition duration-200">
        {{ buttonText }}
      </div>

    </div>
  </div>

</a>
 
{
  "image": "https://picsum.photos/id/10/400/300",
  "heading": "Heading",
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "buttonText": "Read More"
}