Marketing Blog Cards Bordered with image, title, excerpt and call to action

Live Preview
<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>

Related components

More items from the merged UI library.

View all