Card

Cards are foundational containers that can be used for anything from feature lists to blog posts.

Usage

import Card from '~/components/ui/Card.astro';

<Card>
  <h3>Card Title</h3>
  <p>Card content...</p>
</Card>

Interactive Cards

By passing an href prop, the card becomes a clickable link with hover effects.

<Card href="/somewhere" class="group">
    <h4 class="flex items-center gap-2">
        Clickable Card 
        <ArrowRight class="group-hover:translate-x-1 transition-transform"/>
    </h4>
</Card>

Props

Prop	Type	Default	Description
href	string	undefined	If provided, renders as an anchor and adds hover styles.
as	string	div (or a if href)	The HTML tag to render.
class	string	undefined	Custom classes.