---
sidebar_position: 2
---

# Image Card With Subtitle And Title

![Cards](/img/image-card-with-subtitle-and-title.png)

```jsx title="Frontend/sections/BlogSections/ImageCardWithSubtitleAndTitle.tsx"
<>
      {/* <!-- Card Blog --> */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* <!-- Title --> */}
        <div className="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
          <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
            Read our latest news
          </h2>
          <p className="mt-1 text-secondary-content">
            We've helped some great companies brand, design and get to market.
          </p>
        </div>
        {/* <!-- End Title --> */}

        {/* <!-- Grid --> */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10 lg:mb-14">
          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-9">
              <img
                className="w-full h-48 object-cover rounded-t-xl"
                src="https://images.unsplash.com/photo-1668869713519-9bcbb0da7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=988&q=80"
                alt="Image Description"
              />
            </div>
            <div className="p-4 md:p-5">
              <p className="mt-2 text-xs uppercase text-secondary-content">
                Product
              </p>
              <h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
                Better is when everything works together
              </h3>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-9">
              <img
                className="w-full h-48 object-cover rounded-t-xl"
                src="https://images.unsplash.com/photo-1668584054035-f5ba7d426401?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3465&q=80"
                alt="Image Description"
              />
            </div>
            <div className="p-4 md:p-5">
              <p className="mt-2 text-xs uppercase text-secondary-content">
                Business
              </p>
              <h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
                What CFR really is about
              </h3>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-9">
              <img
                className="w-full h-48 object-cover rounded-t-xl"
                src="https://images.unsplash.com/photo-1668863699009-1e3b4118675d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80"
                alt="Image Description"
              />
            </div>
            <div className="p-4 md:p-5">
              <p className="mt-2 text-xs uppercase text-secondary-content">
                Business
              </p>
              <h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
                Should Product Owners think like entrepreneurs?
              </h3>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-9">
              <img
                className="w-full h-48 object-cover rounded-t-xl"
                src="https://images.unsplash.com/photo-1668584054131-d5721c515211?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
                alt="Image Description"
              />
            </div>
            <div className="p-4 md:p-5">
              <p className="mt-2 text-xs uppercase text-secondary-content">
                Facilitate
              </p>
              <h3 className="mt-2 text-lg font-medium text-secondary-content group-hover:text-primary">
                Announcing Front Strategies: Ready-to-use rules
              </h3>
            </div>
          </a>
          {/* <!-- End Card --> */}
        </div>
        {/* <!-- End Grid --> */}

        {/* <!-- Card --> */}
        <div className="text-center">
          <div className="inline-block bg-base-100 border shadow-sm rounded-full">
            <div className="py-3 px-4 flex items-center gap-x-2">
              <p className="text-secondary-content">Want to read more?</p>
              <a
                className="inline-flex items-center gap-x-1.5 text-primary decoration-2 hover:underline font-medium"
                href="../docs/index.html"
              >
                Go here
                <svg
                  className="flex-shrink-0 w-4"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="m9 18 6-6-6-6" />
                </svg>
              </a>
            </div>
          </div>
        </div>
        {/* <!-- End Card --> */}
      </div>
      {/* <!-- End Card Blog --> */}
    </>
```