Card

The Card component is a versatile container for content with support for structured layouts.

Basic Usage

---
import Card from '@/components/ui/Card.astro';
---

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

Variants

<Card variant="default">Default with border</Card>
<Card variant="solid">Solid background</Card>
<Card variant="outline">Thick outline</Card>
<Card variant="ghost">No background</Card>
<Card variant="elevated">With shadow</Card>

Padding and Shadow

<!-- Padding options -->
<Card padding="none">No padding</Card>
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding</Card>
<Card padding="lg">Large padding</Card>

<!-- Shadow options -->
<Card shadow="none">No shadow</Card>
<Card shadow="sm">Small shadow</Card>
<Card shadow="md">Medium shadow</Card>
<Card shadow="lg">Large shadow</Card>

<!-- Combined -->
<Card padding="lg" shadow="lg">Large padding and shadow</Card>

Hover Effect

<Card hover>Hover me for effect</Card>

As Link

Make the entire card clickable:

<Card href="/details" hover>
  <h3>Clickable Card</h3>
  <p>Click anywhere to navigate</p>
</Card>

Structured Layout

Use the structured mode for consistent layouts:

---
import Icon from '@/components/ui/Icon.astro';
---

<Card
  structured
  title="Feature Name"
  subtitle="Category"
  description="This is a detailed description of the feature."
>
  <Icon name="star" slot="icon" />
</Card>

Props

Prop	Type	Default	Description
variant	'default' | 'solid' | 'outline' | 'ghost' | 'elevated'	'default'	Visual style
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Internal padding
shadow	'none' | 'sm' | 'md' | 'lg'	'none'	Shadow depth
hover	boolean	false	Enable hover effect
href	string	—	Make card clickable
structured	boolean	false	Enable structured layout
title	string	—	Card title
subtitle	string	—	Card subtitle
description	string	—	Card description

Slots

Slot	Purpose
default	Card content
icon	Icon for structured cards

Examples

Feature Card Grid

<div class="grid md:grid-cols-3 gap-6">
  <Card structured title="Fast" description="Lightning quick builds">
    <Icon name="zap" slot="icon" />
  </Card>
  <Card structured title="Secure" description="Built-in security">
    <Icon name="shield" slot="icon" />
  </Card>
  <Card structured title="Scalable" description="Grows with you">
    <Icon name="trending-up" slot="icon" />
  </Card>
</div>

Blog Post Card

<Card hover href={`/blog/${post.slug}`} padding="none">
  <img src={post.image} alt={post.title} class="w-full h-48 object-cover" />
  <div class="p-4">
    <h3 class="font-semibold mb-2">{post.title}</h3>
    <p class="text-foreground-muted text-sm">{post.excerpt}</p>
  </div>
</Card>

Pricing Card

<Card variant="elevated" padding="lg" class="text-center">
  <h3 class="text-xl font-bold">Pro Plan</h3>
  <p class="text-3xl font-bold my-4">$29<span class="text-sm">/mo</span></p>
  <ul class="text-left space-y-2 mb-6">
    <li>✓ Unlimited projects</li>
    <li>✓ Priority support</li>
    <li>✓ Advanced analytics</li>
  </ul>
  <Button fullWidth>Get Started</Button>
</Card>