Cards group content with consistent padding, borders, and elevation. Combine variants with .vd-card-glow, .vd-card-glass, or the Water Morph effect for richer demos.

Variants

Elevated is the default: medium shadow (stronger in dark mode). Outlined drops the shadow for a crisp border. Filled uses a subtle surface tint and no border.

Glow on hover

Add .vd-card-glow for a soft primary-tinted halo and border shift on hover (in addition to the elevated hover lift when applicable).

Glass (frosted)

.vd-card-glass applies the glass token stack from the Glass Effects system — best seen over imagery or gradients. Respects prefers-reduced-transparency via the glass utilities.

Morph inside a card

Pair a card shell with the Water Morph effect to swap summary ↔ detail. Uses .vd-morph-lg for a slower wave.

Compact & spacious

<div class="vd-card">
  <div class="vd-card-header">
    <h3>Card Title</h3>
  </div>
  <div class="vd-card-body">
    <p>Card content goes here.</p>
  </div>
  <div class="vd-card-footer">
    <button class="vd-btn vd-btn-primary vd-btn-sm">Action</button>
  </div>
</div>

<!-- Outlined variant -->
<div class="vd-card vd-card-outlined">...</div>

<!-- Filled variant -->
<div class="vd-card vd-card-filled">...</div>

.vd-card {
  background-color: var(--vd-card-bg);
  border-radius: var(--vd-card-border-radius);
  box-shadow: var(--vd-card-shadow-elevated);
}

.vd-card-outlined {
  box-shadow: none;
  border: 1px solid var(--vd-border-color);
}

.vd-card-filled {
  box-shadow: none;
  background-color: var(--vd-card-bg-filled);
  border: none;
}

Card Groups

Use .vd-card-group to connect cards with shared borders and no gaps — great for pricing tiers or feature lists.

<div class="vd-card-group">
  <div class="vd-card">
    <div class="vd-card-header"><h6>Free</h6></div>
    <div class="vd-card-body">
      <p class="vd-text-2xl vd-font-bold vd-mb-3">$0</p>
      <p class="vd-text-sm vd-text-muted">Basic features</p>
    </div>
  </div>
  <div class="vd-card">
    <div class="vd-card-header"><h6>Pro</h6></div>
    <div class="vd-card-body">
      <p class="vd-text-2xl vd-font-bold vd-mb-3">$12</p>
      <p class="vd-text-sm vd-text-muted">Everything in Free</p>
    </div>
  </div>
  <div class="vd-card">
    <div class="vd-card-header"><h6>Enterprise</h6></div>
    <div class="vd-card-body">
      <p class="vd-text-2xl vd-font-bold vd-mb-3">Custom</p>
      <p class="vd-text-sm vd-text-muted">Dedicated support</p>
    </div>
  </div>
</div>

Image Cards

Cards with top images using .vd-card-image or .vd-card-image-container for overlay text.

Landscape

Cards can hold images, charts, maps, or any media at the top.

View Code

HTML

Copy

<div class="vd-card">
  <div class="vd-card-image-container" style="position: relative;">
    <img src="landscape.jpg" alt="Landscape" class="vd-card-image"
         style="width: 100%; height: 160px; object-fit: cover;">
    <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem;
                background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white;">
      <h5 class="vd-mb-0">Landscape</h5>
    </div>
  </div>
  <div class="vd-card-body">
    <p class="vd-text-sm vd-text-muted vd-mb-0">Cards can hold images, charts, maps, or any media at the top.</p>
  </div>
</div>

Actionable Cards

Add .vd-card-interactive for hover lift, cursor pointer, and focus ring — perfect for clickable cards that navigate or trigger modals.

<div class="vd-card vd-card-interactive vd-card-glow" role="button" tabindex="0">
  <div class="vd-card-body">
    <i class="ph ph-rocket-launch" style="font-size: 2rem; color: var(--vd-color-primary);
       margin-bottom: 0.75rem; display: block;"></i>
    <h5>Get Started</h5>
    <p class="vd-text-sm vd-text-muted vd-mb-0">Click this card to navigate — the whole surface is interactive.</p>
  </div>
</div>

<script setup lang="ts">
import { VdCard } from "@vanduo-oss/vd3";
</script>

<template>
  <VdCard interactive>
    <template #header><h6>Project</h6></template>
    Body content goes in the default slot.
    <template #footer>
      <button class="vd-btn vd-btn-primary">Open</button>
    </template>
  </VdCard>
</template>