Cards
The kd-card is a flexible container with optional header, body, and footer slots. Use type to apply a colored border variant.
Default
Basic Card
A simple card with title and subtitle
Cards are used to group related content and actions. They can contain text, inputs, images, and more.
With Actions
Card with footer action buttons
This card has action buttons in the footer slot.
With Header Slot
Custom header content
The header slot lets you add custom controls alongside the title.
Color Variants
Primary
Border color: primary
Use for key actions or highlighted sections.
Success
Border color: success
Use to confirm a successful operation or status.
Error
Border color: error
Use to indicate failures, warnings, or destructive actions.
Warning
Border color: warning
Use to surface cautions that require attention.
Elevated
Elevated Card
Drop shadow applied
The elevated prop adds a drop shadow to give cards more visual prominence.
Elevated Primary
Combined with color type
Combine elevated with a type for strong visual emphasis.
Content Only
A card without a title renders just the body. Great for image galleries, data grids, or any layout block.