Skip to content
HyperUI

No results found.

Back to marketing components

Blog Cards

Discover modern blog card components built with Tailwind CSS. Enhance your marketing pages with responsive, customizable blog cards for posts, articles, and news—optimized for performance and SEO.

6/7 Dark Mode (Request)Updated: Jul 4, 2026

Bordered with image, date, title and excerpt, shadow on hover

markmead

<article class="overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full object-cover"
  />

  <div class="bg-white p-4 sm:p-6">
    <time datetime="2022-10-10" class="block text-xs text-gray-500"> 10th Oct 2022 </time>

    <a href="#">
      <h3 class="mt-0.5 text-lg text-gray-900">
        How to position your furniture for positivity
      </h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>
  </div>
</article>

Bordered with image, date, title and excerpt, shadow on hover (Dark)

markmead

<article
  class="overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg dark:shadow-gray-700/25"
>
  <img
    alt=""
    src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full object-cover"
  />

  <div class="bg-white p-4 sm:p-6 dark:bg-gray-900">
    <time datetime="2022-10-10" class="block text-xs text-gray-500 dark:text-gray-400">
      10th Oct 2022
    </time>

    <a href="#">
      <h3 class="mt-0.5 text-lg text-gray-900 dark:text-white">
        How to position your furniture for positivity
      </h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>
  </div>
</article>

Floating image with title and excerpt

markmead

<article class="group">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50"
  />

  <div class="p-4">
    <a href="#">
      <h3 class="text-lg font-medium text-gray-900">Finding the Journey to Mordor</h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>
  </div>
</article>

Floating image with title and excerpt (Dark)

markmead

<article class="group">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1631451095765-2c91616fc9e6?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full rounded-xl object-cover shadow-xl transition group-hover:grayscale-50 dark:shadow-gray-700/25"
  />

  <div class="p-4">
    <a href="#">
      <h3 class="text-lg font-medium text-gray-900 dark:text-white">
        Finding the Journey to Mordor
      </h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>
  </div>
</article>

Bordered with image, title, excerpt and call to action

markmead

<article class="overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full object-cover"
  />

  <div class="p-4 sm:p-6">
    <a href="#">
      <h3 class="text-lg font-medium text-gray-900">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>

    <a
      href="#"
      class="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600"
    >
      Find out more

      <span aria-hidden="true" class="block transition-all group-hover:ms-0.5 rtl:rotate-180">
        &rarr;
      </span>
    </a>
  </div>
</article>

Bordered with image, title, excerpt and call to action (Dark)

markmead

<article
  class="overflow-hidden rounded-lg border border-gray-100 bg-white shadow-xs dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25"
>
  <img
    alt=""
    src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?auto=format&fit=crop&q=80&w=1160"
    class="h-56 w-full object-cover"
  />

  <div class="p-4 sm:p-6">
    <a href="#">
      <h3 class="text-lg font-medium text-gray-900 dark:text-white">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </h3>
    </a>

    <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
      pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
      quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
      atque dignissimos. Molestias explicabo corporis voluptatem?
    </p>

    <a
      href="#"
      class="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600"
    >
      Find out more

      <span aria-hidden="true" class="block transition-all group-hover:ms-0.5 rtl:rotate-180">
        &rarr;
      </span>
    </a>
  </div>
</article>

Gradient border with date, title and tags, animated gradient on hover

markmead

<article class="rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4">
  <time datetime="2022-10-10" class="block text-xs text-gray-500"> 10th Oct 2022 </time>

  <a href="#">
    <h3 class="mt-0.5 text-lg font-medium text-gray-900">
      How to center an element using JavaScript and jQuery
    </h3>
  </a>

  <div class="mt-4 flex flex-wrap gap-1">
    <span
      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600"
    >
      Snippet
    </span>

    <span
      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600"
    >
      JavaScript
    </span>
  </div>
</article>

Gradient border with date, title and tags, animated gradient on hover (Dark)

markmead

<article
  class="rounded-[10px] border border-gray-200 bg-white px-4 pt-12 pb-4 dark:border-gray-700 dark:bg-gray-900"
>
  <time datetime="2022-10-10" class="block text-xs text-gray-500 dark:text-gray-400">
    10th Oct 2022
  </time>

  <a href="#">
    <h3 class="mt-0.5 text-lg font-medium text-gray-900 dark:text-white">
      How to center an element using JavaScript and jQuery
    </h3>
  </a>

  <div class="mt-4 flex flex-wrap gap-1">
    <span
      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
    >
      Snippet
    </span>

    <span
      class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs whitespace-nowrap text-purple-600 dark:bg-purple-600 dark:text-purple-100"
    >
      JavaScript
    </span>
  </div>
</article>

Bordered with icon, title, excerpt and call to action, shadow on hover

markmead

<article
  class="rounded-lg border border-gray-100 bg-white p-4 shadow-xs transition hover:shadow-lg sm:p-6"
>
  <span class="inline-block rounded-sm bg-blue-600 p-2 text-white">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      class="size-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path d="M12 14l9-5-9-5-9 5 9 5z" />
      <path
        d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
      />
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
      />
    </svg>
  </span>

  <a href="#">
    <h3 class="mt-0.5 text-lg font-medium text-gray-900">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    </h3>
  </a>

  <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
    pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
    quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
    atque dignissimos. Molestias explicabo corporis voluptatem?
  </p>

  <a
    href="#"
    class="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600"
  >
    Find out more

    <span aria-hidden="true" class="block transition-all group-hover:ms-0.5 rtl:rotate-180">
      &rarr;
    </span>
  </a>
</article>

Bordered with icon, title, excerpt and call to action, shadow on hover (Dark)

markmead

<article
  class="rounded-lg border border-gray-100 bg-white p-4 shadow-xs transition hover:shadow-lg sm:p-6 dark:border-gray-800 dark:bg-gray-900 dark:shadow-gray-700/25"
>
  <span class="inline-block rounded-sm bg-blue-600 p-2 text-white dark:bg-blue-700">
    <svg
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      class="size-6"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path d="M12 14l9-5-9-5-9 5 9 5z" />
      <path
        d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
      />
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
      />
    </svg>
  </span>

  <a href="#">
    <h3 class="mt-0.5 text-lg font-medium text-gray-900 dark:text-white">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    </h3>
  </a>

  <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-500 dark:text-gray-400">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
    pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
    quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
    atque dignissimos. Molestias explicabo corporis voluptatem?
  </p>

  <a
    href="#"
    class="group mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600"
  >
    Find out more

    <span aria-hidden="true" class="block transition-all group-hover:ms-0.5 rtl:rotate-180">
      &rarr;
    </span>
  </a>
</article>

Artistic with rotated date, image, title, excerpt and call to action, shadow on hover

markmead

<article class="flex bg-white transition hover:shadow-xl">
  <div class="rotate-180 p-2 [writing-mode:vertical-lr]">
    <time
      datetime="2022-10-10"
      class="flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase"
    >
      <span>2022</span>
      <span class="w-px flex-1 bg-gray-900/10"></span>
      <span>Oct 10</span>
    </time>
  </div>

  <div class="hidden sm:block sm:basis-56">
    <img
      alt=""
      src="https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160"
      class="aspect-square h-full w-full object-cover"
    />
  </div>

  <div class="flex flex-1 flex-col justify-between">
    <div class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6">
      <a href="#">
        <h3 class="font-bold text-gray-900 uppercase">
          Finding the right guitar for your style - 5 tips
        </h3>
      </a>

      <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-700">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
        atque dignissimos. Molestias explicabo corporis voluptatem?
      </p>
    </div>

    <div class="sm:flex sm:items-end sm:justify-end">
      <a
        href="#"
        class="block bg-yellow-300 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-400"
      >
        Read Blog
      </a>
    </div>
  </div>
</article>

Artistic with rotated date, image, title, excerpt and call to action, shadow on hover (Dark)

markmead

<article
  class="flex bg-white transition hover:shadow-xl dark:bg-gray-900 dark:shadow-gray-800/25"
>
  <div class="rotate-180 p-2 [writing-mode:vertical-lr]">
    <time
      datetime="2022-10-10"
      class="flex items-center justify-between gap-4 text-xs font-bold text-gray-900 uppercase dark:text-white"
    >
      <span>2022</span>
      <span class="w-px flex-1 bg-gray-900/10 dark:bg-white/10"></span>
      <span>Oct 10</span>
    </time>
  </div>

  <div class="hidden sm:block sm:basis-56">
    <img
      alt=""
      src="https://images.unsplash.com/photo-1609557927087-f9cf8e88de18?auto=format&fit=crop&q=80&w=1160"
      class="aspect-square h-full w-full object-cover"
    />
  </div>

  <div class="flex flex-1 flex-col justify-between">
    <div
      class="border-s border-gray-900/10 p-4 sm:border-l-transparent sm:p-6 dark:border-white/10"
    >
      <a href="#">
        <h3 class="font-bold text-gray-900 uppercase dark:text-white">
          Finding the right guitar for your style - 5 tips
        </h3>
      </a>

      <p class="mt-2 line-clamp-3 text-sm/relaxed text-gray-700 dark:text-gray-200">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
        atque dignissimos. Molestias explicabo corporis voluptatem?
      </p>
    </div>

    <div class="sm:flex sm:items-end sm:justify-end">
      <a
        href="#"
        class="block bg-yellow-400 px-5 py-3 text-center text-xs font-bold text-gray-900 uppercase transition hover:bg-yellow-500"
      >
        Read Blog
      </a>
    </div>
  </div>
</article>

Background image with overlay containing date, title and excerpt

markmead

<article class="relative overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg">
  <img
    alt=""
    src="https://images.unsplash.com/photo-1661956602116-aa6865609028?auto=format&fit=crop&q=80&w=1160"
    class="absolute inset-0 h-full w-full object-cover"
  />

  <div class="relative bg-linear-to-t from-gray-900/50 to-gray-900/25 pt-32 sm:pt-48 lg:pt-64">
    <div class="p-4 sm:p-6">
      <time datetime="2022-10-10" class="block text-xs text-white/90"> 10th Oct 2022 </time>

      <a href="#">
        <h3 class="mt-0.5 text-lg text-white">How to position your furniture for positivity</h3>
      </a>

      <p class="mt-2 line-clamp-3 text-sm/relaxed text-white/95">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
        pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
        quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
        atque dignissimos. Molestias explicabo corporis voluptatem?
      </p>
    </div>
  </div>
</article>

Related components

View all marketing components