---
sidebar_position: 2
---

# Image And Content With Stretched Buttons

![Cards](/img/image-and-content-with-stretched-buttons.png)

```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithTitleAndDescription.tsx"
<>
      {/* <!-- Card Section --> */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* <!-- Grid --> */}
        <div className="grid sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-6">
          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Management
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    4 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    App Development
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    26 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Arts & Entertainment
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    9 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Accounting
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    11 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    UI Designer
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    37 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Apps
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    2 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Content Writer
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    10 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group flex flex-col bg-base-100 border shadow-sm rounded-xl hover:shadow-md transition dark:focus:outline-none dark:focus:ring-1"
            href="#"
          >
            <div className="p-4 md:p-5">
              <div className="flex justify-between items-center">
                <div>
                  <h3 className="group-hover:text-primary font-semibold text-secondary-content">
                    Analytics
                  </h3>
                  <p className="text-sm text-secondary-content/50">
                    14 job positions
                  </p>
                </div>
                <div className="ps-3">
                  <svg
                    className="flex-shrink-0 w-5"
                    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>
                </div>
              </div>
            </div>
          </a>
          {/* <!-- End Card --> */}
        </div>
        {/* <!-- End Grid --> */}
      </div>
      {/* <!-- End Card Section --> */}
    </>
```