timniel
/
Quiz-PDF
forked from mrwyndham/fastpocket
1
0
Fork 0
Code Pull Requests Activity
Quiz-PDF/Documentation/docs/components/card sections/SimpleCardLinkWithAvatarAnd...

300 lines
12 KiB
Markdown
Raw Permalink Blame History

---
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 --> */}
</>
```
View Git Blame Copy Permalink