Web Components Library

News Card

News listing card with optional image. The image has a set height and uses object-cover to fill in the image in the available space.

Example client projects using this component:

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

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

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

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

        <div class="p-6">
            <p class="mt-2 mb-2 text-gray-600">Active Living</p>
            <p class="text-2xl font-bold">Celebrating Senior&#x27;s Week in Lethbridge</p>
            <p class="mt-12 mb-4 font-semibold text-blue-400">Read full Story</p>
        </div>

    </a>

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

    <a href="#" class="mb-12 flex flex-col mx-auto max-w-sm bg-white shadow-xl hover:shadow-2xl">
        <div class="p-6">
            <p class="mt-2 mb-2 text-gray-600">Active Living</p>
            <p class="text-2xl font-bold">Celebrating Senior&#x27;s Week in Lethbridge</p>
            <p class="mt-12 mb-4 font-semibold text-blue-400">Read full Story</p>
        </div>

    </a>

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

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

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

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

    <div class="p-6">
      <p class="mt-2 mb-2 text-gray-600">{{ text1 }}</p>
      <p class="text-2xl font-bold">{{ text2 }}</p>
      <p class="mt-12 mb-4 font-semibold text-blue-400">{{ linktext }}</p>
    </div>

  </a>


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

  <a href="#" class="mb-12 flex flex-col mx-auto max-w-sm bg-white shadow-xl hover:shadow-2xl">
    <div class="p-6">
      <p class="mt-2 mb-2 text-gray-600">{{ text1 }}</p>
      <p class="text-2xl font-bold">{{ text2 }}</p>
      <p class="mt-12 mb-4 font-semibold text-blue-400">{{ linktext }}</p>
    </div>

  </a>

</div>
 
{
  "text1": "Active Living",
  "text2": "Celebrating Senior's Week in Lethbridge",
  "linktext": "Read full Story"
}