Card

Container for grouping related content with optional header and footer sections. Supports multiple visual variants and hover effects.

Installation

typescript

import { Card } from '@happyvertical/smrt-svelte';

Basic Usage

A simple card with default styling.

This is some card content.

svelte

<Card>
  <p>This is some card content.</p>
</Card>

Variants

Choose from default, outlined, or elevated styles.

Default card

Outlined card

Elevated card

svelte

<Card variant="default">Default card</Card>
<Card variant="outlined">Outlined card</Card>
<Card variant="elevated">Elevated card</Card>

Padding Sizes

Control content padding with the padding prop.

No padding

Small padding

Medium padding

Large padding

svelte

<Card padding="none">No padding</Card>
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding (default)</Card>
<Card padding="lg">Large padding</Card>

With Header and Footer

Add header and footer sections using snippets.

Card Title

Main card content goes here with supporting text and details.

svelte

<Card>
  {#snippet header()}
    <h3>Card Title</h3>
  {/snippet}

  <p>Main card content goes here.</p>

  {#snippet footer()}
    <Button>Action</Button>
  {/snippet}
</Card>

Hoverable

Add hover effects for interactive cards.

Hover over this card to see the effect.

svelte

<Card hoverable>
  <p>Hover over this card to see the effect.</p>
</Card>

Real-World Example

A product card with header, content, and footer.

Premium Plan

Popular

$29/month

Unlimited users
Priority support
Advanced analytics

svelte

<Card variant="elevated">
  {#snippet header()}
    <div class="product-header">
      <h3>Premium Plan</h3>
      <Badge variant="primary">Popular</Badge>
    </div>
  {/snippet}

  <p>$29/month</p>
  <ul>
    <li>Unlimited users</li>
    <li>Priority support</li>
    <li>Advanced analytics</li>
  </ul>

  {#snippet footer()}
    <Button>Subscribe</Button>
  {/snippet}
</Card>

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'outlined' \| 'elevated'`	`'default'`	Visual style variant
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Content padding size
`hoverable`	`boolean`	`false`	Adds hover effect with elevation
`header`	`Snippet`	-	Content for the card header section
`footer`	`Snippet`	-	Content for the card footer section

TypeScript

typescript

import { Card } from '@happyvertical/smrt-svelte';

type CardVariant = 'default' | 'outlined' | 'elevated';
type CardPadding = 'none' | 'sm' | 'md' | 'lg';

interface Props {
  variant?: CardVariant;
  padding?: CardPadding;
  hoverable?: boolean;
  children?: Snippet;
  header?: Snippet;
  footer?: Snippet;
}