Card Component

A versatile container component for grouping related content with consistent styling and interactive states.

Overview

The Card component is a flexible container that groups related content together. It provides consistent styling, spacing, and interactive states across the application.

Default Card

This is a default card with standard styling.

Glass Card

This is a glass card with backdrop blur effect.

Usage

Basic Import

---
import Card from '../ui/atoms/Card.astro';
---

<Card>
  <p>Card content goes here</p>
</Card>

With Props

<Card 
  variant="glass" 
  padding="lg" 
  hover
  clickable
>
  <h3>Interactive Card</h3>
  <p>This card has hover effects and is clickable</p>
</Card>

Variants

Default

Standard card with solid background and border.

Default Card

Perfect for most content containers and sections.

Glass

Modern glass-morphism effect with backdrop blur.

Glass Card

Great for overlays and modern UI elements.

Outline

Minimal card with just a border and transparent background.

Outline Card

Subtle and minimal for secondary content.

Padding Options

Small padding for compact content

Medium padding for standard content

Large padding for spacious layouts

No padding - you control the spacing

Interactive States

Hover Effect

Hover Me

This card has hover animations and effects.

Clickable

Click Me

This card shows cursor pointer and click states.

Props

Prop Type Default Description
variant string "default" Card style variant: "default", "glass", "outline"
padding string "md" Internal padding: "none", "sm", "md", "lg"
hover boolean false Enables hover animations and effects
clickable boolean false Shows pointer cursor and click states
class string undefined Additional CSS classes

Examples

Feature Card

Fast Performance

Lightning-fast load times and optimized performance.

<Card variant="glass" padding="lg" hover>
  <div class="text-center">
    <!-- Icon -->
    <h4>Fast Performance</h4>
    <p>Lightning-fast load times...</p>
    <Button variant="outline" size="sm">Learn More</Button>
  </div>
</Card>

Project Card

Project Name

A brief description of the project and its key features.

<Card variant="default" padding="lg" hover clickable>
  <div class="aspect-video bg-gradient-to-br..."></div>
  <h4>Project Name</h4>
  <p>A brief description...</p>
  <div class="flex gap-2">
    <Badge variant="primary">React</Badge>
    <Badge variant="success">TypeScript</Badge>
  </div>
</Card>

Stats Card

50+
Projects
3+
Years
100%
Satisfaction
<Card variant="outline" padding="md" class="text-center">
  <div class="text-2xl font-bold text-orange-400">50+</div>
  <div class="text-sm text-gray-400">Projects</div>
</Card>

Best Practices

Do

  • Use consistent card variants within the same section
  • Choose appropriate padding based on content density
  • Use hover effects for interactive cards
  • Group related content logically within cards
  • Maintain consistent spacing between cards

Don't

  • Nest cards too deeply (avoid card within card)
  • Use clickable without proper hover feedback
  • Mix too many variants in the same layout
  • Overcrowd cards with too much content
  • Use cards for single line text or simple elements