---
sidebar_position: 2
---

# Simple Card Link With Avatar And Title

![Cards](/img/simple-card-link-with-avatar-and-title.png)

```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithAvatarAndTitle.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 lg: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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1486299267070-83823f5448dd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      London, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1612046264803-6d6b67fdee80?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Bristol, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1582542021865-bde52fd7c3cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Oxford, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1571044880241-95d4c9aa06f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Edinburgh, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1598964356161-754cc07fcd36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Newcastle, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1566328386401-b2980125f6c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Liverpool, UK
                    </h3>
                  </div>
                </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 className="flex items-center">
                  <img
                    className="w-[38px] rounded-full"
                    src="https://images.unsplash.com/photo-1597740049284-388659a41286?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80"
                    alt="Image Description"
                  />
                  <div className="ms-3">
                    <h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
                      Manchester, UK
                    </h3>
                  </div>
                </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 --> */}
    </>
```