Card · Panel

Basic Usage

Recent Users

Kathryn Campbell

kathryn@apple.com

Active

Robert Smith

robert@openai.com

Inactive

Sophia Johnson

sophia@meta.com

Active

Lucas Walker

lucas@tesla.com

Inactive

Emily Davis

emily@sap.com

Active

<link rel="preload" as="image" href="./assets/media/avatars/1.png"><link rel="preload" as="image" href="./assets/media/avatars/2.png"><link rel="preload" as="image" href="./assets/media/avatars/3.png"><link rel="preload" as="image" href="./assets/media/avatars/4.png"><link rel="preload" as="image" href="./assets/media/avatars/5.png">
<div class="mv-card w-[400px]">
  <div class="mv-card-header">
    <div class="mv-card-heading">
      <h2 class="mv-card-title">Recent Users</h2>
    </div>
    <div class="mv-card-toolbar">
      <button type="button" class="mv-btn mv-btn-xs mv-btn-outline mv-btn-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings" aria-hidden="true">
          <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="mv-card-content py-1">
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/1.png" alt="Kathryn Campbell">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Kathryn Campbell</a>
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/2.png" alt="Robert Smith">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Robert Smith</a>
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-secondary">Inactive</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/3.png" alt="Sophia Johnson">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Sophia Johnson</a>
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/4.png" alt="Lucas Walker">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Lucas Walker</a>
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-secondary">Inactive</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/5.png" alt="Emily Davis">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Emily Davis</a>
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
  </div>
  <div class="mv-card-footer justify-center">
    <button class="mv-link mv-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>

Accent

Recent Users

Kathryn Campbell

kathryn@apple.com

Active

Robert Smith

robert@openai.com

Inactive

Sophia Johnson

sophia@meta.com

Active

Lucas Walker

lucas@tesla.com

Inactive

Emily Davis

emily@sap.com

Active

<link rel="preload" as="image" href="./assets/media/avatars/1.png"><link rel="preload" as="image" href="./assets/media/avatars/2.png"><link rel="preload" as="image" href="./assets/media/avatars/3.png"><link rel="preload" as="image" href="./assets/media/avatars/4.png"><link rel="preload" as="image" href="./assets/media/avatars/5.png">
<div class="mv-card mv-card-accent w-[400px]">
  <div class="mv-card-header">
    <div class="mv-card-heading">
      <h2 class="mv-card-title">Recent Users</h2>
    </div>
    <div class="mv-card-toolbar">
      <button type="button" class="mv-btn mv-btn-xs mv-btn-outline mv-btn-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings" aria-hidden="true">
          <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path>
          <circle cx="12" cy="12" r="3"></circle>
        </svg>
      </button>
    </div>
  </div>
  <div class="mv-card-content py-1">
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/1.png" alt="Kathryn Campbell">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Kathryn Campbell</a>
          <div class="text-sm font-normal text-muted-foreground">
            kathryn@apple.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/2.png" alt="Robert Smith">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Robert Smith</a>
          <div class="text-sm font-normal text-muted-foreground">
            robert@openai.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-secondary">Inactive</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/3.png" alt="Sophia Johnson">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Sophia Johnson</a>
          <div class="text-sm font-normal text-muted-foreground">
            sophia@meta.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/4.png" alt="Lucas Walker">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Lucas Walker</a>
          <div class="text-sm font-normal text-muted-foreground">
            lucas@tesla.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-secondary">Inactive</span>
    </div>
    <div class="flex items-center justify-between gap-2 py-2 border-b border-border border-dashed last:border-none">
      <div class="flex items-center gap-3">
        <div class="mv-avatar size-8">
          <div class="mv-avatar-image">
            <img src="./assets/media/avatars/5.png" alt="Emily Davis">
          </div>
        </div>
        <div>
          <a href="#" class="text-sm font-medium text-foreground hover:text-primary">Emily Davis</a>
          <div class="text-sm font-normal text-muted-foreground">
            emily@sap.com
          </div>
        </div>
      </div>
      <span class="mv-badge mv-badge-outline mv-badge-primary">Active</span>
    </div>
  </div>
  <div class="mv-card-footer justify-center">
    <button class="mv-link mv-link-underlined underline-dashed">
      Learn more
    </button>
  </div>
</div>

Simple Content

Project Kickoff

Finalize scope, owners, and launch milestones for the next sprint.

Due dateMay 15, 2026

<div class="mv-card w-[400px]">
  <div class="mv-card-content space-y-4">
    <div>
      <h3 class="text-sm font-semibold text-foreground">Project Kickoff</h3>
      <p class="mt-1 text-sm text-muted-foreground">
        Finalize scope, owners, and launch milestones for the next sprint.
      </p>
    </div>
    <div class="flex items-center justify-between text-sm">
      <span class="text-muted-foreground">Due date</span><span class="font-medium text-foreground">May 15, 2026</span>
    </div>
  </div>
</div>

Media and Meta

Product Roadmap Review

Align design, engineering, and growth priorities for Q3 planning.

Tue, 10:00 AM8 attendees

<link rel="preload" as="image" href="./assets/media/products/1.avif?auto=format&amp;fit=crop&amp;w=1200&amp;q=80">
<div class="mv-card w-[400px] overflow-hidden">
  <img src="./assets/media/products/1.avif?auto=format&amp;fit=crop&amp;w=1200&amp;q=80" alt="Product roadmap" class="h-44 w-full object-cover">
  <div class="mv-card-content space-y-4">
    <div class="space-y-1">
      <h3 class="text-base font-semibold text-foreground">
        Product Roadmap Review
      </h3>
      <p class="text-sm text-muted-foreground">
        Align design, engineering, and growth priorities for Q3 planning.
      </p>
    </div>
    <div class="flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
      <span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-clock size-4" aria-hidden="true">
          <path d="M16 14v2.2l1.6 1"></path>
          <path d="M16 2v4"></path>
          <path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"></path>
          <path d="M3 10h5"></path>
          <path d="M8 2v4"></path>
          <circle cx="16" cy="16" r="6"></circle></svg>Tue, 10:00 AM</span><span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users size-4" aria-hidden="true">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <circle cx="9" cy="7" r="4"></circle></svg>8 attendees</span>
    </div>
  </div>
</div>

Loading Skeleton

Loading State

<div class="mv-card w-[400px]">
  <div class="mv-card-header">
    <div class="mv-card-heading">
      <h2 class="mv-card-title">Loading State</h2>
    </div>
  </div>
  <div class="mv-card-content space-y-3">
    <div class="mv-skeleton h-4 w-2/5"></div>
    <div class="mv-skeleton h-3 w-full"></div>
    <div class="mv-skeleton h-3 w-4/5"></div>
    <div class="mv-skeleton h-24 w-full rounded-lg"></div>
  </div>
</div>

Stats Grid

Weekly Performance

Revenue

$84.2K

+12.4% vs last week

Orders

1,482

+6.9% vs last week

Conversion

4.8%

+1.1% vs last week

Refunds

0.9%

-0.3% vs last week

<div class="mv-card w-[560px]">
  <div class="mv-card-header">
    <div class="mv-card-heading">
      <h2 class="mv-card-title">Weekly Performance</h2>
    </div>
  </div>
  <div class="mv-card-content grid grid-cols-2 gap-3">
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Revenue
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">$84.2K</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +12.4%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Orders
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">1,482</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +6.9%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Conversion
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">4.8%</p>
      <p class="mt-1 text-xs text-muted-foreground">
        +1.1%<!-- -->
        vs last week
      </p>
    </div>
    <div class="rounded-lg border border-border bg-muted/30 px-4 py-3">
      <p class="text-xs uppercase tracking-wide text-muted-foreground">
        Refunds
      </p>
      <p class="mt-1 text-lg font-semibold text-foreground">0.9%</p>
      <p class="mt-1 text-xs text-muted-foreground">
        -0.3%<!-- -->
        vs last week
      </p>
    </div>
  </div>
</div>

Action List

<div class="mv-card w-[400px]">
  <div class="mv-card-header">
    <div class="mv-card-heading">
      <h2 class="mv-card-title">Action List</h2>
    </div>
  </div>
  <div class="mv-card-content py-1">
    <button type="button" class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none">
      <div>
        <p class="text-sm font-medium text-foreground">
          Finalize onboarding copy
        </p>
        <p class="text-xs text-muted-foreground">Ready for review</p>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right size-4 text-muted-foreground" aria-hidden="true">
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg></button><button type="button" class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none">
      <div>
        <p class="text-sm font-medium text-foreground">
          Approve email sequence
        </p>
        <p class="text-xs text-muted-foreground">Waiting for design</p>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right size-4 text-muted-foreground" aria-hidden="true">
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg></button><button type="button" class="flex w-full items-center justify-between border-b border-dashed border-border py-3 text-start last:border-none">
      <div>
        <p class="text-sm font-medium text-foreground">Publish release notes</p>
        <p class="text-xs text-muted-foreground">Draft in progress</p>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right size-4 text-muted-foreground" aria-hidden="true">
        <path d="M7 7h10v10"></path>
        <path d="M7 17 17 7"></path>
      </svg>
    </button>
  </div>
</div>