Web Components Library

Cards Grid

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
<div class="px-4 py-8 bg-gray-100">

    <div class="flex flex-col max-w-5xl mx-auto sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-8">

        <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="http://placeimg.com/640/480/nature?random&#x3D;827" 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">
                    omnis aut
                </h3>

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

                    <p class="pb-8 mx-auto text-gray-600">
                        Libero rerum sunt nihil quasi. Dolores quisquam et. Quae magni adipisci sit illo aliquid tempora.
                    </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> <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="http://placeimg.com/640/480/nature?random&#x3D;928" 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">
                    asperiores et
                </h3>

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

                    <p class="pb-8 mx-auto text-gray-600">
                        Saepe quae sequi distinctio enim exercitationem facilis aut iusto. Nostrum ducimus qui similique autem fuga. Consequuntur autem sint illum at.
                    </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> <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="http://placeimg.com/640/480/nature?random&#x3D;237" 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">
                    quas iusto
                </h3>

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

                    <p class="pb-8 mx-auto text-gray-600">
                        Quia dolores provident consequatur dolorem aspernatur molestiae velit illum. Qui reprehenderit fugit quo rem. At dicta adipisci non commodi tenetur.
                    </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> <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="http://placeimg.com/640/480/nature?random&#x3D;63" 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">
                    quis et
                </h3>

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

                    <p class="pb-8 mx-auto text-gray-600">
                        Beatae quia in repellendus in et amet aut dolores est. Repellendus expedita molestiae consequatur explicabo aut. Ut vel quis et quaerat qui.
                    </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> <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="http://placeimg.com/640/480/nature?random&#x3D;473" 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">
                    voluptas harum
                </h3>

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

                    <p class="pb-8 mx-auto text-gray-600">
                        Voluptatem qui ea voluptates. Totam minus aut accusamus ut aperiam. Similique nesciunt et dolor corporis ipsum.
                    </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>
    </div>

</div>
 
<div class="px-4 py-8 bg-gray-100">

    {{!-- Wrapper to control bg color, justify content and gap between cards --}}

    {{!-- Use flex for larger screens, should work in IE 11 (with bugs) --}}
    {{!-- <div class="flex flex-col flex-wrap px-4 py-8 bg-gray-100 sm:justify-center sm:flex-row gap-x-8 lg:gap-x-12 gap-y-8 lg:gap-y-12"> --}}

    {{!-- Using grid for larger screens, not supported in IE 11 and below --}}
    <div class="flex flex-col max-w-5xl mx-auto sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-8">

        {{#each items }}
        {{> @card }}
        {{/each}}

    </div>

</div>
 
{
  "items": [
    {
      "image": "http://placeimg.com/640/480/nature?random=827",
      "heading": "omnis aut",
      "text": "Libero rerum sunt nihil quasi. Dolores quisquam et. Quae magni adipisci sit illo aliquid tempora.",
      "buttonText": "Read More"
    },
    {
      "image": "http://placeimg.com/640/480/nature?random=928",
      "heading": "asperiores et",
      "text": "Saepe quae sequi distinctio enim exercitationem facilis aut iusto. Nostrum ducimus qui similique autem fuga. Consequuntur autem sint illum at.",
      "buttonText": "Read More"
    },
    {
      "image": "http://placeimg.com/640/480/nature?random=237",
      "heading": "quas iusto",
      "text": "Quia dolores provident consequatur dolorem aspernatur molestiae velit illum. Qui reprehenderit fugit quo rem. At dicta adipisci non commodi tenetur.",
      "buttonText": "Read More"
    },
    {
      "image": "http://placeimg.com/640/480/nature?random=63",
      "heading": "quis et",
      "text": "Beatae quia in repellendus in et amet aut dolores est. Repellendus expedita molestiae consequatur explicabo aut. Ut vel quis et quaerat qui.",
      "buttonText": "Read More"
    },
    {
      "image": "http://placeimg.com/640/480/nature?random=473",
      "heading": "voluptas harum",
      "text": "Voluptatem qui ea voluptates. Totam minus aut accusamus ut aperiam. Similique nesciunt et dolor corporis ipsum.",
      "buttonText": "Read More"
    }
  ]
}