Card

Overview

VyCard is a rounded, clipped surface with three optional regions — header, default body, and footer. Each region renders only when its slot is provided. Cards use neutral surfaces; the variant prop selects the fill and border treatment.

Usage

<script setup lang="ts">
import { VyCard } from '@vyui/kit'
</script>

<template>
  <VyCard>
    <template #header>
      <text>Title</text>
    </template>

    <text>Body content goes here.</text>

    <template #footer>
      <text>Footer</text>
    </template>
  </VyCard>
</template>

Variants

<VyCard variant="outline"><text>Outline</text></VyCard>
<VyCard variant="soft"><text>Soft</text></VyCard>
<VyCard variant="subtle"><text>Subtle</text></VyCard>
<VyCard variant="solid"><text>Solid</text></VyCard>

Features and behavior

• Each region (header, default, footer) renders only when its slot is present.
• The root clips overflow and rounds its corners; content padding lives on each region slot.
• solid paints a dark root fill and sets a white foreground on the region slots — Lynx does not cascade text color into deeply-nested <text>, so plain-text children of a solid card should set their own color or pass ui.{header,body,footer}.

Props

Card uses neutral surfaces only and does not expose a semantic color; override colors through appConfig.ui.card or the ui prop.

Emits

This component does not emit events.

Slots

Styling and theming

Override globally through appConfig.ui.card or locally with ui.

The default theme is a light-mode port of Nuxt UI's card. The default variant is outline.

Related components

• Separator for dividing card regions.
• Placeholder and Skeleton for empty and loading states.