Card Component — Astro

Flexible card component with variants, sections, and image support

Card Component

The Card component provides a flexible container for organizing content with variants, sections, and image support.

Basic Usage

The simplest card usage:

Live Example

Card Title

This is a basic card with default styling. It uses semantic theme variables and adapts to all themes.

Code Example

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

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

Card Variants

Cards support four variants for different visual styles:

Default

Live Example

Default Card

Standard card with border and background.

Elevated

Live Example

Elevated Card

Card with shadow effect. Hover to see it lift up.

Outlined

Live Example

Outlined Card

Transparent background with border. Hover to see accent border.

Filled

Live Example

Filled Card

Uses main background color instead of alt background.

Code Example

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

<Card variant="elevated">
  <h3>Elevated Card</h3>
  <p>Content</p>
</Card>

<Card variant="outlined">
  <h3>Outlined Card</h3>
  <p>Content</p>
</Card>

<Card variant="filled">
  <h3>Filled Card</h3>
  <p>Content</p>
</Card>

Card Sections

Use card sections for structured layouts with header, body, and footer:

Live Example

Card Title

Card subtitle or description

This is the main content area of the card. It can contain any content you need.

Multiple paragraphs, lists, or other elements work great here.

Code Example

astro astro 
---
import Card from '../../components/Card.astro';
import Button from '../../components/Button.astro';
---

<Card>
  <div class="card__header">
    <h3 class="card__title">Card Title</h3>
    <p class="card__subtitle">Subtitle text</p>
  </div>
  <div class="card__body">
    <p>Main content area</p>
  </div>
  <div class="card__footer">
    <Button>Action</Button>
  </div>
</Card>

Section Classes

  • card__header - Header section with bottom border
  • card__body - Main content area (flexible, takes remaining space)
  • card__footer - Footer section with top border
  • card__title - Title styling for header
  • card__subtitle - Subtitle styling for header

Card with Image

Add an image to your card using the card__image class:

Live Example
Image Placeholder

Card with Image

This card includes an image at the top. The image automatically adjusts to the card's border radius.

Code Example

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

<Card variant="elevated">
  <img src="/path/to/image.jpg" alt="Description" class="card__image" />
  <div class="card__header">
    <h3 class="card__title">Card Title</h3>
  </div>
  <div class="card__body">
    <p>Card content</p>
  </div>
</Card>

Complete Example

Live Example
Featured Image

Complete Card Example

With image, header, body, and footer

This is a complete card example showcasing all features:

  • Image at the top
  • Structured header with title and subtitle
  • Flexible body content
  • Footer with actions

Props

  • variant ('default' | 'elevated' | 'outlined' | 'filled', optional) - Card variant style (default: 'default')
  • class (string, optional) - Additional CSS classes

Styling

All card styles use semantic theme variables and automatically adapt to the selected theme. Card styles are defined in src/styles/layout.css.

Customization

You can customize cards using CSS variables or by adding custom classes:

css css 
.custom-card {
  border-radius: 1rem;
  padding: 2rem;
}

Accessibility

Cards are semantic containers and don't require specific ARIA attributes. However, when using cards as interactive elements (like links or buttons), ensure proper accessibility:

  • Use semantic HTML (e.g., <article> for card content)
  • Provide proper heading hierarchy
  • Include alt text for images
  • Ensure keyboard navigation for interactive cards

Svelte & Vanilla: Svelte ¡ Vanilla: same HTML and BEM as in Usage above.