Web Components Library

Cards

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
  • Handle: @cards-variations
  • Preview:
  • Filesystem Path: components/02-components/cards/cards/cards-variations.hbs 
<div class="pt-12 pb-12 px-4 bg-gray-50">

    <h2 class="text-center text-lg text-gray-400 mb-6">Card with small image</h2>

    <a href="#" class="mb-12 flex flex-row max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

        <img class="object-cover h-full" src="https://source.unsplash.com/random/150x150" alt="Random Image">

        <div class="text-xl flex items-center p-6">
            Roving Gyms
        </div>

    </a>

    <h2 class="text-center text-lg text-gray-400 mb-6">Card with banner image</h2>

    <a href="#" class="mb-12 flex flex-col max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

        <img class="object-cover h-28" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="text-xl flex items-center p-6">
            Roving Gyms
        </div>

    </a>

    <h2 class="text-center text-lg text-gray-400 mb-6">Responsive Card</h2>

    <a class="flex flex-row sm:flex-col max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

        <img class="object-cover h-32 w-32 sm:h-48 sm:w-full" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="text-xl flex items-center p-6">
            Roving Gyms
        </div>

    </a>

</div>
 
<div class="pt-12 pb-12 px-4 bg-gray-50">

  <h2 class="text-center text-lg text-gray-400 mb-6">Card with small image</h2>

  <a href="#" class="mb-12 flex flex-row max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

    <img class="object-cover h-full" src="https://source.unsplash.com/random/150x150" alt="Random Image">

    <div class="text-xl flex items-center p-6">
      {{ text1 }}
    </div>

  </a>


  <h2 class="text-center text-lg text-gray-400 mb-6">Card with banner image</h2>

  <a href="#" class="mb-12 flex flex-col max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

    <img class="object-cover h-28" src="https://source.unsplash.com/random/300x200" alt="Random Image">

    <div class="text-xl flex items-center p-6">
      {{ text1 }}
    </div>

  </a>

  <h2 class="text-center text-lg text-gray-400 mb-6">Responsive Card</h2>

  <a class="flex flex-row sm:flex-col max-w-md mx-auto shadow-md hover:shadow-lg bg-white">

    <img class="object-cover h-32 w-32 sm:h-48 sm:w-full" src="https://source.unsplash.com/random/300x200"
         alt="Random Image">

    <div class="text-xl flex items-center p-6">
      {{ text1 }}
    </div>

  </a>

</div>
 
{
  "text1": "Roving Gyms"
}