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">
    <h3 class="flex items-center gap-2">
        Clickable Card 
        <ArrowRight class="group-hover:translate-x-1 transition-transform"/>
    </h3>
</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. |