54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import './content-cards.css'
|
|
|
|
interface cardProps {
|
|
src?: string
|
|
button_link?: string
|
|
heading?: string
|
|
button_text?: string
|
|
card_text?: string
|
|
}
|
|
|
|
export default function ContentCard(CardProps: cardProps) {
|
|
return (
|
|
<article className="content-card group flex h-full w-full min-h-80 flex-col p-6">
|
|
<div className="content-card-body flex h-full flex-col">
|
|
<a href="#" className="block shrink-0">
|
|
<div className="content-card-image aspect-video w-full">
|
|
<img
|
|
className="h-full w-full object-cover"
|
|
src={CardProps.src}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</a>
|
|
<a href="#" className="mt-6 block shrink-0">
|
|
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-heading">
|
|
{CardProps.heading}
|
|
</h5>
|
|
</a>
|
|
<p className="mb-6 line-clamp-3 flex-1 text-body">{CardProps.card_text}</p>
|
|
<a href="#" className="content-card-cta mt-auto self-start">
|
|
{CardProps.button_text}
|
|
<svg
|
|
className="ms-1.5 -me-0.5 h-3 w-3 rtl:rotate-180"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
fill="none"
|
|
viewBox="0 0 20 20"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M19 12H5m14 0-4 4m4-4-4-4"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|