forked from mrwyndham/fastpocket
134 lines
4.9 KiB
Markdown
134 lines
4.9 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# Simple Card Link With Icon Title And Description
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/CardSections/SimpleCardLinkWithIconTitleAndDescription.tsx"
|
|
<>
|
|
{/* <!-- Card Section --> */}
|
|
<div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 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">
|
|
<svg
|
|
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
|
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
|
</svg>
|
|
|
|
<div className="grow ms-5">
|
|
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
|
Ask our community
|
|
</h3>
|
|
<p className="text-sm text-secondary-content">
|
|
Get help from 40k+ FastPocket users
|
|
</p>
|
|
</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">
|
|
<svg
|
|
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
|
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"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
|
<path d="M12 17h.01" />
|
|
</svg>
|
|
|
|
<div className="grow ms-5">
|
|
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
|
Get help in the app
|
|
</h3>
|
|
<p className="text-sm text-secondary-content">
|
|
Just head to «Help» in the app
|
|
</p>
|
|
</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">
|
|
<svg
|
|
className="mt-1 flex-shrink-0 w-5 text-secondary-content"
|
|
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="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
|
|
<path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
|
|
</svg>
|
|
|
|
<div className="grow ms-5">
|
|
<h3 className="group-hover:text-primary/50 font-semibold text-secondary-content">
|
|
Email us
|
|
</h3>
|
|
<p className="text-sm text-secondary-content">
|
|
Reach us at{" "}
|
|
<span className="text-primary font-medium">
|
|
info@site.com
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{/* <!-- End Card --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
{/* <!-- End Card Section --> */}
|
|
</>
|
|
```
|