KCard

示例

Card Title

Card description text.

Main content goes here with some example text.

Footer content

A small card with just content.

Card container with composable sub-components for structured layouts.

Sub-Components

• KCard — Root card container
• KCardHeader — Header section with grid layout
• KCardTitle — Card title (<h3> element)
• KCardDescription — Muted description text
• KCardAction — Action area positioned in the top-right corner
• KCardContent — Main content area
• KCardFooter — Footer section with muted background and top border

Props (KCard)

Name	Type	Default	Description
size	'default' | 'sm'	'default'	Size variant of the card.
theme	'auto' | 'day' | 'night'	'auto'	Theme mode. auto follows the current theme; day and night force a specific mode.

Slots

Name	Description
default	Card content. Use sub-components for structured layouts.

Basic Usage

<script setup>
import {
  KCard,
  KCardHeader,
  KCardTitle,
  KCardDescription,
  KCardAction,
  KCardContent,
  KCardFooter,
} from '@kK-2004/ui-component'
</script>

<template>
  <KCard>
    <KCardHeader>
      <KCardTitle>Card Title</KCardTitle>
      <KCardDescription>Card description text.</KCardDescription>
      <KCardAction>
        <KButton size="sm">Action</KButton>
      </KCardAction>
    </KCardHeader>
    <KCardContent>
      Main content goes here.
    </KCardContent>
    <KCardFooter>
      Footer content
    </KCardFooter>
  </KCard>
</template>