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>

Card Title

Card description text.

Main content goes here.

Footer content