Component Demo

Card Component

A reusable card with optional image, title, description, and a CTA button that supports both links and click handlers.

Discover hidden trails and breathtaking views on your next adventure into the wilderness. Perfect for solo travellers and groups alike.

From farm-fresh ingredients to bold flavours — explore recipes, restaurants, and the stories behind every dish.

Collaborate, ship fast, and iterate. Modern teams use modern tools — here's how the best product teams stay ahead.

Take a breath. Brew something good. This card has a link CTA and an image — the classic card pattern at its finest.

No image needed. This variant is ideal for feature lists, pricing tiers, or any content where visuals aren't necessary.

This card has no image — the layout adapts gracefully and still looks great with just text content and a CTA button.

Props

Prop	Type	Default	Description
imageSrc	string	—	URL of the card image (optional)
imageAlt	string	""	Alt text for the image
title	string	required	Card heading
description	string	required	Body text
ctaLabel	string	"Learn more"	Button label
ctaHref	string	—	Renders an <a> tag when provided
ctaOnClick	() => void	—	Click handler (used when no href)